gradient

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+
  • linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

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

In the future a slightly altered syntax will be used, but since it’s not yet supported by WebKit-browsers the below described notation is the way to go.

  • Firefox 16+
  • Safari 5.1+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+

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 doesn’t 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).
Example
Inspect me!?

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.
Example
Inspect me!?

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%).
Example
Inspect me!?

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+
  • radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

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

In the future a slightly altered syntax will be used, but since it’s not yet supported by WebKit-browsers the below described notation is the way to go.

  • Firefox 16+
  • Safari 5.1+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+

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 gradient’s 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 doesn’t 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).
Example
Inspect me!?

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.
Example

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 box’s 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.
Example
Inspect me!?

Elliptical gradient ending at the farthest side

Note: Since the default value (respectively the default shape) for a radial gradient is an ellipse it doesn’t 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.
Example
Inspect me!?

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 stop’s position and the first one’s position.

Compatibility

  • -webkit-repeating-linear-gradient Safari 5.1+
  • repeating-linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

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

  • Firefox 16+
  • Safari 5.1+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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 stop’s position and the first one’s position.

Compatibility

  • -webkit-radial-gradient Safari 5.1+
  • radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

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

Although older versions of WebKit use a different syntax, it’s advised to leave it out due to its complexity. In the future a slightly altered syntax will be used, but since it’s not yet supported by WebKit-browsers the below described notation is the way to go.

  • Firefox 16+
  • Safari 5.1+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+

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 doesn’t 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).
Example
Inspect me!?

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 box’s 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.
Example
Inspect me!?

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).

x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • http://macx.de David Maciejewski

    Webkit changed it syntax for gradients, please read the blogpost and add these informations to this article.

    • http://www.css3files.com Christian Krammer

      Thank you for your suggestion David. However the blog post named by you suggests that Safari WILL change the syntax for Gradients in the future, not that they have already implemented it in current versions of Webkit browers. As far as I can tell the new syntax works neither in Webkit 5.0.4 nor Chrome 10. Trust me, I have double checked all of the properties in every browser!

      Furthermore I clearly mentioned the following:
      “Fortunately Webkit’s spelling will be discarded in the next release of the Browser.”

  • http://macx.de David Maciejewski

    I just wondered, because -webkit-linear-gradient is already implemented in all nightly builds of webkit and works fine. You should add it in the compatibility list.

    • http://www.css3files.com Christian Krammer

      I don’t support info for nightly builds or betas expect when they are not far away from final like IE9 and Firefox 4. I will clearly state that in the future.

  • Binyamin

    -webkit-gradient(linear) /* Saf4.0+, Chrome */
    -webkit-linear-gradient /* Chrome 10+, Saf5.0.3 + */

    • http://www.css3files.com Christian Krammer

      Thank you for the tip. Concerning Chrome you are right, -webkit-linear-gradient works indeed in version 10. I will change that at the compatibility overview as soon as possible.

      However Safari 5.0.4 still uses -webkit-gradient(linear). I checked it right now in the Windows version and it still doesn’t show the gradient when noting -webkit-linear-gradient.

      Anyhow I thank you very much for making me pay attention about this issue!

  • http://architter.com Marco

    There is a way to use gradients on IE9 although it’s not css3 maybe you should include it:

    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=’#fafafa’, EndColorStr=’#eeeeee’, GradientType=0);

    • http://www.css3files.com Christian Krammer

      Thanks for the tip, Marco!

      But unfortunately MS-filters are proprietary and non-standard and really have no business in a modern CSS3-enhanced website. Please don’t use them!

    • Vladislav Shkodin

      IE9 doesn’t support filters.

  • Kim

    Why are gradients not smooth in the latest FF or Chrome on Windows?
    The Mac versions of FF and Chrome are smooth and look good, but the Windows versions show banding.

    • Kim

      Ah, nevermind that question. The problem was that I was connecting to my PC via remote desktop and I have now discovered that 16bit color depth is apparently the default for that.
      Windows Safari and IE showed smooth gradients anyway, so when Chrome and FF did not, I mistakenly thought it was some issue with the code or those browsers.

  • http://www.jarodtaylor.com Jarod

    I can’t wait til the standard is implemented, but I’m happy that the syntax is slowly being adopted across the major browsers at least.

    Good write up.

    Question: in webkit’s legacy syntax (-webkit-gradient(linear,…), I’m assuming angle’s(90deg) are not supported?

    • http://www.css3files.com Christian Krammer

      I hope so too.

      You are right, angles are not supported in Webkit’s notation, but since you can can define both the edges of the starting and the ending points, you can make gradients which have angles in 45 degree steps. For example, a diagonal gradient would be “left top, right bottom”.

  • Simon

    The W3C spec has been updated !

    Cf. http://bricss.net/post/16108748575/small-but-important-and-final-change-to-linear

    Still, great summary.

  • http://seojaguars.com/ jaguars

    please help me.. how to make a CSS3 Repeat Linear Gradient to change image border?
    for example like this awasome background for this blog

    • http://www.css3files.com Christian Krammer

      Gradients are only possible for backgrounds right now, you can’t outfit a border with it. The background at css3files is just a plain simple image, no big thing.

  • Arley

    I would like to read in this article about radial gradients. :)

    By the way, really good site and very good quality of articles.

    • http://www.css3files.com Christian Krammer

      Thanks for the demand. I’m already struggling for a long time to describe radial gradients in detail, but as always time’s the problem since they are pretty extensive. But as soon as I can free some time radial gradients have top priority for me.

  • http://www.buytemplatedesigns.com Senthil kumar

    Thanks for this post. Gradient concept has been cleared now.