linear-gradient
Gradients are smooth transitions from one color to another. Currently only gradients as background images (through the background property) are supported.
Compatibility
-moz-linear-gradientFirefox-webkit-gradient(linear)Safari 5-webkit-linear-gradientChrome-o-linear-gradientOperalinear-gradientW3C
To maintain compatibility with older browser versions it is advised to additionally use Webkit’s old syntax, which differes significantly from the official one. Not supported by Internet Explorer 9. For detailed compatibility info see caniuse.com.
- Firefox 3.6+
- Safari 5
- Safari 5.1+, Chrome 10+
- Opera 11+
- Official syntax
No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.
General description
Official syntax
Multiple gradients can be assinged comma separated. By default gradients fill the whole background. For tiled gradients see examples or linear-repeating-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-positionproperty apply. In this caseleftdefines a gradient running from the left to the right,left topwould be a diagonal gradient running from the top left corner to the bottom right. Can also be an angle where0degpoints to the right,90degpoints up and-45degruns 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 it’s position on the gradient axis (like 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 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 of50%(which would be the standard 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 4).
Webkit’s old syntax
Same gradient as seen above but with different spelling. Basically the meaning of the values is the same. Only used by Safari prior to version 5.1 anymore. To maintain compatibility with older browsers versions it is however advised to additionally use this syntax.
background: -webkit-gradient(linear, 1 left top, 2 right top, 3 from(red), 4 color-stop(0.3, blue), 5 to(green))
- 1 The starting point.
- 2 The ending point. General values from the
background-positionproperty apply for both the starting and the ending point. - 3 The starting color.
- 4Optional. A color stop consisiting of a position and a color value where
1stands for 100%. Multiple color stops are possible, separated by a comma. The zero before the comma of the position can be omitted. - 5 The ending color.
Examples
Diagonal gradient with multiple color stops
background: linear-gradient(1 225deg, 2 red, 3 green 20%, 4 yellow 70%, 5 white)
- 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’s axis (instead of33%, which would be its natural position). - 4 Color stop. The color is yellow at
70%on the gradient’s axis (instead of66%). - 5 Ending color of white.
Angeled gradient with just color stops
background: linear-gradient(1 105deg, 2 white 20%, 3 magenta 80%)
- 1 Starting point. The gradient has an angle of 105 degrees.
- 2 Color stop. The starting color of white is moved to
20%on the gradient axis (instead of0%). - 3 Color stop. The end color of magenta is moved to
80%on the gradient axis (instead of100%).
Repeated gradient with a sharp transitition
The same can be archived using the single property repeating-linear-gradient.
background: linear-gradient(1 yellow, 2 yellow 50%, 3 red 50%, 4 red)
- 1 Starting color of yellow.
- 2 Color stop of yellow at
50%on the radient axis. - 3 Color stop of red at
50%on the gradient axis. As there are two colors set on the same position they suddenly change instead of transitioning smoothly to orange. With the addition of the background-size property it is possible to resize the gradient to get a repeated background. For more info see the Safari site. - 4 Ending color of red.
Further reading
For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).
Webkit changed it syntax for gradients, please read the blogpost and add these informations to this article.
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.”
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.
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.
-webkit-gradient(linear) /* Saf4.0+, Chrome */
-webkit-linear-gradient /* Chrome 10+, Saf5.0.3 + */
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!
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);
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!
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.
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.
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?
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”.
The W3C spec has been updated !
Cf. http://bricss.net/post/16108748575/small-but-important-and-final-change-to-linear
Still, great summary.