---
title: CSS3 v2 Upgrade
layout: tutorial
crumb: CSS3 v2 Upgrade
classnames:
  - tutorial
---
# Upgrading to Compass CSS3 v2
Many mixins and certain uses of mixins have been deprecated, but your
existing stylesheets should still work out of the box with one exception:
users who are using the `css3/transform` module should update their imports
to import `css/transform-legacy` when they upgrade. They should then upgrade
to the new `css/transform` module at their convenience.

You should read about what changed, update your stylesheets accordingly
and then update your imports to the new version.

<a name="box-shadow"></a>
## Box Shadow
You may get a deprecation warning using the `box-shadow` mixin.
You can resolve this in one of the following ways:

1. Change your use of the `box-shadow` and instead use `single-box-shadow`.
   This mixin has the same behavior and arguments as the old `box-shadow` mixin.
2. Keep using `box-shadow`, change how you pass the arguments. The new
   `box-shadow` takes up to 10 comma-delimited shadows. Each shadow is
   how the values should appear in the CSS (space separated).

<a name="text-shadow"></a>
## Text Shadow

You may get a deprecation warning using the `text-shadow` mixin.
You can resolve this in one of the following ways:

1. Change your use of the `text-shadow` and instead use `single-text-shadow`.
   This mixin has the same behavior and arguments as the old `text-shadow` mixin.
2. Keep using `text-shadow`, change how you pass the arguments. The new
   `text-shadow` takes up to 10 comma-delimited shadows. Each shadow is
   how the values should appear in the CSS (space separated).

<a name="transform"></a>
## CSS Transforms
The transform module was largely re-written to support 3D transforms. If you
are using it, it is suggested that you read the [new module's documentation][new_transform]
and adjust your code appropriately. Many mixin names and constants have changed.
For your convenience, the [old CSS transform module][old_transform] can still be imported, but it
is deprecated and will be removed in the next release.

<a name="gradients"></a>
## Gradients

The Compass gradient support now more closely emulates the CSS3 specification of how gradients
are represented and passed around. The `linear-gradient` and `radial-gradient` mixins
have been deprecated and instead, you should use the `linear-gradient()` and `radial-gradient()`
functions in conjunction with mixins for the [properties that support gradients][image_stylesheet] like
`background` / `background-image`, `border-image`, `list-style` / `list-style-image`,
and `content`.

After upgrading, you'll receive deprecation warnings for your usage of the old gradient
mixins and a suggested replacement value for each. If you'd rather keep the old mixins in
your project for convenience, just copy the following to your project after changing your imports:

    @mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
      @include background-image($image, radial-gradient($center-position, $color-stops));
    }
    @mixin linear-gradient($color-stops, $start: top, $image: false) {
      @include background-image($image, linear-gradient($start, $color-stops));
    }

Or for sass files:

    =radial-gradient($color-stops, $center-position: center center, $image: false)
      +background-image($image, radial-gradient($center-position, $color-stops))
    
    =linear-gradient($color-stops, $start: top, $image: false)
      +background-image($image, linear-gradient($start, $color-stops))

[new_transform]: /reference/compass/css3/transform/
[old_transform]: /reference/compass/css3/transform-legacy/
[image_stylesheet]: /reference/compass/css3/images/