linear-gradient

Gradients are smooth transitions from one color to another. Currently only gradients as background images (through the background property) are supported.

Compatibility

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Not supported by Internet Explorer prior to version 10 and Opera Mini. For detailed compatibility info see caniuse.com.

Rececently there was a change to a slightly different syntax, but you can still safely use the syntax described here.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

General description

Multiple gradients can be assigned comma separated. By default gradients fill the whole background. For tiled gradients see repeating-linear-gradient. rgba and transparent values for all color information are possible.

background: linear-gradient(1 left, 2 red, 3 blue 4 30%, 5 green)

  1. Optional. The starting point of the gradient defining a straight line on which the gradient runs to the ending point. General values from the background-position property apply. In this case left defines a gradient running from the left to the right, left top would be a diagonal gradient running from the top left corner to the bottom right. Can also be an angle where 0deg points to the right, 90deg points up and -45deg runs from the top left corner to bottom right. Defaults to a top down gradient (top).
  2. The starting color (the first color stop). Can also be enhanced by a stop position to move its position on the gradient axis (like at 4).
  3. Optional. A color stop. In this case the gradient doesnt simply transition from red (2) to green (5) but is enhanced by a color stop of blue in the middle. Multiple color stops (perhaps enhanced by a stop position like at 4) are possible, separated by commas.
  4. Optional. Stop position. Defines the position of the color stop on the gradient axis. In this case blue is set to be at 30% instead of 50% (which would be the natural behavior). Can also be a length value (e. g. 20px).
  5. The ending color (the last color stop). Can also be extended by a stop position (like at 4).

Examples

Diagonal gradient with multiple color stops

background: linear-gradient(1 225deg, 2 red, 3 green 20%, 4 yellow 70%, 5 black)

  1. Starting point. The gradient starts at the top right corner and runs to the bottom left. Same as -135deg.
  2. Starting color of red.
  3. Color stop. The color is green at 20% on the gradient axis (instead of 33%, which would be its natural position).
  4. Color stop. The color is yellow at 70% on the gradient axis (instead of 66%).
  5. Ending color of white.

Angeled gradient with just color stops

background: linear-gradient(1 105deg, 2 black 20%, 3 magenta 80%)

  1. Starting point. The gradient has an angle of 105 degrees.
  2. Color stop. The starting color of black is moved to 20% on the gradient axis (instead of 0%).
  3. Color stop. The end color of magenta is moved to 80% on the gradient axis (instead of 100%).

Further reading

For more info see the W3C site (new syntax), the Safari site and the site at MDN (including compatibility info for older browser versions).

radial-gradient

Gradients are smooth transitions from one color to another. Currently only gradients as background images (through the background property) are supported.

Compatibility

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Not supported by Internet Explorer prior to version 10 and Opera Mini. For detailed compatibility info see caniuse.com.

Rececently there was a change to a slightly different syntax, but you can still safely use the syntax described here.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

General description

Multiple gradients can be assigned comma separated. By default gradients fill the whole background. For tiled gradients see repeating-radial-gradient. rgba and transparent values for all color information are possible.

background: radial-gradient(1 60px 45px, 2 circle 3 closest-side, 4 red, 5 blue 6 60%, 7 green)

  1. Optional. The center of the gradient. General values from the background-position property apply. In this case 20px 40px defines that the gradients center is 20px from the left side of the containing box and 40px from the top. Can also be a percentage which relates to the dimensions of the box. Defaults to center, which also applies for the second value if only one is given.
  2. Optional. The shape of the gradient, in this case circular. Defaults to ellipse.
  3. Optional. The size of the gradient. Can either be defined by a keyword or an explizit length. The available keywords are: closest-side, closest-corner, farthest-side, farthest-corner. See description. If a length is provided it refers to the radii and must consist of two values, the horizontal and vertical length. Defaults to farthest-corner.
  4. The starting color (the first color stop). Can also be enhanced by a stop position to move its position on the gradient ray (like at 6).
  5. Optional. A color stop. In this case the gradient doesnt simply transition from red (4) to green (7) but is enhanced by a color stop of blue in the middle. Multiple color stops (perhaps extended by a stop position like at 6) are possible, separated by commas.
  6. Optional. Stop position. Defines the position of the color stop on the gradient ray. In this case blue is set to be at 60% instead of 50% (which would be the natural behavior). Can also be a length value (e. g. 20px).
  7. The ending color (the last color stop). Can also be extended by a stop position (like at 6).

Description of the size keywords

Note: The circles at the accompanying illustration show the outer shapes of the various gradients shaped with the different keywords.

  1. closest-side: The gradient is sized so that its outer shape meets the side of the gradient box that is closest to its center. If an ellipse is specified the sides in both dimensions are met.
  2. farthest-side: The gradient is sized so that its outer shape meets the side of the gradient box that is farthest away from its center. If an ellipse is specified the sides in both dimensions are met.
  3. closest-corner: The gradient is sized so that its outer shape runs through the corner of the gradient box that is closest to its center. If an ellipse is specified it is given the same aspect-ratio as if closest-side (1) was specified.
  4. farthest-corner: The gradient is sized so that its outer shape runs through the corner of the gradient box that is farthest away from its center (default value). If an ellipse is specified it is given the same aspect-ratio as if farthest-side (2) was specified.

Examples

Circular gradient ending at the closest corner

background: radial-gradient(1 60% 55%, 2 circle 3 closest-corner, 4 red, 5 green 20%, 6 yellow 70%, 7 black)

  1. The center of the gradient lies at 60% of the boxs width horizontally and 55% of the height vertically.
  2. A circular gradient.
  3. The gradient is sized so that its outer shape runs through the closest corner of the gradient box.
  4. Starting color of red.
  5. Color stop. The color is green at 20% on the gradient ray (instead of 33%, which would be its natural position).
  6. Color stop. The color is yellow at 70% on the gradient ray (instead of 66%).
  7. Ending color of black.

Elliptical gradient ending at the farthest side

Note: Since the default value (respectively the default shape) for a radial gradient is an ellipse it doesnt have to be specified.

background: radial-gradient(1 20px 40px, 2 farthest-side, 3 white 20%, 4 magenta)

  1. The center of the gradient lies at 20px from the left and 40px from the top.
  2. The gradient is sized so that its outer shape meets the farthest sides.
  3. Color stop. The starting color of white is moved to 20% on the gradient axis (instead of 0%).
  4. Ending color of magenta.

Further reading

For more info see the W3C site (new syntax), the Safari site and the site at MDN (including compatibility info for older browser versions).

repeating-linear-gradient

Works similar to linear-gradient but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stops position and the first ones position.

Compatibility

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Not supported by Interent Explorer prior to version 10 and Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

General description

For information about the general syntax please see linear-gradient.

Examples

Smooth gradient repeated four times

background: repeating-linear-gradient(1 red, 2 green 18%, 3 blue 25%)

  1. Starting color of red.
  2. Color stop. The color is green at 18% on the gradient axis (instead of 12.5%, which would be its natural position).
  3. Color stop. The color is blue at 25% on the gradient axis. The last stop position determines how often the gradient gets repeated. Because 25% is a quarter of 100% the gradient gets repeated four times.

Sharp transitioning gradient repeated five times

background: repeating-linear-gradient(1 red, 2 red 11px, 3 white 11px, 4 white 22px)

  1. Starting color of red.
  2. Color stop. The color is red at 11px on the gradient axis.
  3. Color stop. The color is white at 11px on the gradient axis. As there are two colors set on the same position they suddenly change instead of transitioning smoothly to pink.
  4. Color stop. The color is white at 22px on the gradient axis. The last stop position determines how often the gradient gets repeated. Assuming that the box is 110px high the gradient fits five times into it because of its 22px length.

Further reading

For more info see the W3C site (new syntax), the Safari site and the site at MDN (including compatibility info for older browser versions).

repeating-radial-gradient

Works similar to radial-gradient but it repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stops position and the first ones position.

Compatibility

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Not supported by Internet Explorer prior to version 10 and Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

General description

For information about the general syntax please see radial-gradient.

Examples

Smooth gradient repeated two times

Note: Since the default starting point for a radial gradient is at the center of the gradient box it doesnt have to be specified. The same goes for the shape. Based on the centered staring point it is a circle.

background: repeating-radial-gradient(1 closest-side, 2 red, 3 green 20%, 4 blue 50%)

  1. The gradient is sized so that its outer shape meets the closest side.
  2. Starting color of red.
  3. Color stop. The color is green at 20% on the gradient axis (instead of 25%, which would be its natural position).
  4. Color stop. The color is blue at 50% on the gradient axis. The last stop position determines how often the gradient gets repeated. Because 50% is a half of 100% the gradient gets repeated two times (based on the declaration of closest-side at 1).

Sharp transitioning gradient repeated indefinitely

background: repeating-radial-gradient(1 30% 40%, 2 red, 3 red 11px, 4 black 11px, 5 black 22px)

  1. The center of the gradient lies at 30% of the boxs width horizontally and 40% of the height vertically resulting in an elliptical shape.
  2. Starting color of red.
  3. Color stop. The color is red at 11px on the gradient ray.
  4. Color stop. The color is black at 11px on the gradient ray. As there are two colors set on the same position they suddenly change instead of transitioning smoothly to a ruby-coloured tone.
  5. Color stop. The color is black at 22px on the gradient ray. Since no length is defined for the size of the gradient it gets repeated indefinitely.

Further reading

For more info see the W3C site (new syntax), the Safari site and the site at MDN (including compatibility info for older browser versions).