Finally all browser vendors are on the same page when it comes to gradients
The Webkit team introduced CSS gradients on April 14th, 2008. Shortly afterwards they presented it to the W3C for consideration as a recommendation. Sometime later, Mozilla decided to implement CSS gradients using the same notation the Webkit gradients, but with the -moz prefix. After some time, however, they decided to replace that notation with a simpler one. Ever since, to do CSS gradients on the Web you had to write gradients the Webkit way for Safari and Chrome, and the Mozilla way for Firefox. Well, now all browser vendors have agreed to implement the same spec. At this time you can write a single notation that is identical for Safari, Chrome, Firefox, Opera and IE10.
Since version 5.1, Safari has supported the newer notation. Opera beta running Presto 2.10.299 fully supports the linear and radial notation, although the developer site only mentions support for the linear notation. Firefox, of course, already supports this notation. And the latest beta of IE10 does as well. This means that at some point all browsers will support this notation. Well, sort of.
Recently somebody at the W3C has been thinking a little too much. As of January 2012 the document CSS Image Values and Replaced Content Module Level 3 now has a slightly different notation. Since this just showed up, there is no support for it in any browser. And, since it is a working draft, it could change at any time. So, at this time, I’m going to ignore what the document says and just cover what the latest browsers have agreed to support.
Because CSS gradients are still a draft proposal, all browser vendors use their respective prefixes with the notation. This is a good thing since the spec is in flux. They shouldn’t change their present implementation until the spec reaches recommendation status, in which case they can implement the final version of CSS gradients without their vendor prefixes.
Webkit: -webkit-
Mozilla: -moz-
Opera: -o-
Microsoft: -ms-
CSS gradients are rendered as a background image. That means that all of the properties of the CSS background module apply to CSS gradients. In other words, you can have multiple gradients on the same element and control their size and position as well, or use them as image masks. Also, whereas in the past you might have used a background color in conjunction with a background image, you can now use a background gradients as the backdrop for a background image, or you could have a transparent gradient layered over a background image. The ability to stack up gradients while controlling their size, position and repetition means you can create complex repeating patterns that would normally require a background image. The ability to define multiple background images results in a layered affect not unlike Adobe Photoshop’s layers. The new CSS filters module will increase the comparison with Photoshop further my providing many color filters, such as reverse, multiply, dodge, burn, darken, lighten, grayscale, etc. With JavaScript you could also manipulate the properties of your CSS gradients to produce a background pattern that morphs in real time.
Linear Gradients
The notation for linear gradients is quite simple and straightforward. First thing, you’ll be defining it as a background image on an element. CSS uses functions that create the gradient according to the arguments you provide. For linear gradients, the values you’ll need are as follows:
1
[<point (one value, two values or degrees)>]?, <color [stop]?>, <color [stop]?>
From the above definition we can see that all values are optional, except the start and end colors.
The first value (point) is optional. If no value is provided, it will default to drawing the gradient from top to bottom. You can use keywords for the position. These can be a single keyword or a combination of two. You can also use any valid degree values. The purpose of these point definitions is to define which direction the gradient flow towards. You also need to provide at least two colors. The first color will be where the gradient starts from, and the last color will be where the point indicates. So a gradient with yellow and blue and a point value of top will start at the bottom with yellow and end at the top with blue. Here re possible point values:
– top
– right
– bottom
– left
– top left
– top right
– bottom left
– bottom right
– 0deg
– 11deg
– 67deg
– 182deg
– -45deg
– -90deg
Colors can have optional stop values. If no stops are provided, the colors will blend equally from the first to the last.You can provide as many colors as you want to create the gradient, and you can vary their widths by providing stops. The value of the stops can use any valid CSS length identifier (px, pt, em, %, etc.). The position value is placed after the color. You can use any valid CSS colors, such as keywords (red, yellow, blue), or hex, hsl, rgb or rgba values. Regardless of what the stop position is for the last color, that color will continue filling the element the rest of the way.
1
2
3
background-image: linear-gradient(top, yellow 10px, red 80px);
background-image: linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: linear-gradient(60deg, red, white, blue 50%);
Repeating Linear Gradients
Repeat linear gradients are easy to do. Actually, the same effect can be achieved with background size and background repeat properties, but it is nice to have it I suppose. It works the same way as regular linear gradients, except that you use repeating-linear-gradient as the function:
1
2
3
background-image: repeating-linear-gradient(top, yellow 10px, red 80px);
background-image: repeating-linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: repeating-linear-gradient(60deg, red, white, blue 50%);
Radial Gradients
The notation for radial gradients is similar to linear gradients, except that you can specific a shape argument to control how the radial is produced. Here’s the possible values:
1
[<position (two separate values)>]?[[<shape (literal value or length value)>] || [<size length value>]>]? <color [stop]?> <color [stop]?>
From the above definition we can see that all values are optional, except the start and end colors, just like linear gradients.
If no value for position is supplied, the radial gradient will be centered in the element. Position is based on the center of the radial gradient. It accepts the same values as background position. Those values include percentages, lengths and keywords. Just like background positioning, you can use negative values to move the center of the radial gradient off the screen. Percentages and lengths require two values, the first defining the x axis and the second defining the y axis.
1
2
percentage: 0% 0%, 20% 60%, 50% 50%
length: 0px 0px, 24px 45px, 3em 5em
The keywords are: top, right, bottom, left and center. You could combine these in various ways:
1
top left, bottom right, center center, center right, top center
Shape can be either circle or ellipse. If no shape is supplied, if the length value is single, it defaults to a circle with a radius defined by that length. Otherwise, if no shape is supplied and two lengths are passed, it uses those to draw an ellipse. The first value determines the width, the second the height:
1
2
3
4
// A vertical ellipse:
background-image: radial-gradient(center, 100px 400px, red, white);
// An horizontal ellipse:
background-image: radial-gradient(center, 400px 100px, red, white);
If you use one of the shape keywords, you can also use size keywords to control how the radial gradient is draw in relation to its container. The size keywords are:
– closest-side
– farthest-side
– closest-corner
– farthest-corner
First of all, these keywords only work when you use a shape keyword. Defining the shape of the radial gradient with lengths and then trying to use these size keywords will not work. So, this is how these size keywords work. If the container is narrower than it is tall, the size of circle or ellipse will be restrained by the left and right of the container. With farthest-side, it would be restrained by the top and bottom of the container, probably resulting in the left and right extending beyond those sides. Be aware that these work in relation to the position of the radial gradient. That means that if it is positioned near the top left, it will be rendered differently than if it were centered. Closest-corner and farthest-corner work just like closes-side and farthest-side. The best way to get the hang of these keywords is to play around with a radial gradient to see how they affect it. Although these keywords are nice conveniences, you’ll see that they are far from exact. If you need precise placement and size, you’re better off using lengths to define the size of your radial gradient.
Color and stops work similar to linear gradients. The first color defined the color drawn from the center of the radial gradient. The last color will define the outermost color of the gradient. Stops allow you to define more precise positioning of those colors in the radial gradient.
Repeating Radial Gradients
Like repeating linear gradients, it is possible to create the same effect as a repeating radial gradient. You’d just need to define it tediously repeating the colors and providing appropriate stops. In contrast, using the repeating-radial-gradient function makes this easy.
Practical Examples
Enough with theory. Let’s look at what we can do with linear and radial gradients. By layering them and controlling their size and positioning, we can create complex patterns that we can use as Web assets. Please note that in all of the following examples I’m presenting the gradients without vendor prefixes. To have them render in a browser that currently supports CSS gradients, you would need to provide the appropriate vendor prefix for that browser. When the current spec reaches recommendation status, browser vendors will drop their prefix.
In most of these examples I’ve used a transparent gray. This was so I could just add an background color to show through the transparency. Having the color controlled by the background color makes it easy to change the feel of the pattern.
Here’s a vertical stripe with the transparent gray stripe is separated by a 1 pixel transparent stripe:
1
2
3
4
5
background-image:
linear-gradient(0deg,
rgba(0,0,0,0.1) 75%,
transparent 75%);
background-size: 5px 100%;
Here’s the same stripe horizontal:
1
2
3
4
5
background-image:
linear-gradient(90deg,
rgba(0,0,0,0.1) 75%,
transparent 75%);
background-size: 100% 5px;
And here it is slanted to the left:
1
2
3
4
5
6
7
8
9
background-image:
linear-gradient(45deg,
transparent 15%,
rgba(0,0,0,0.1) 15%,
rgba(0,0,0,0.1) 50%,
transparent 50%,
transparent 65%,
rgba(0,0,0,0.1) 69%);
background-size: 6px 6px;
And then to the right:
1
2
3
4
5
6
7
8
9
background-image:
linear-gradient(-45deg,
transparent 15%,
rgba(0,0,0,0.1) 15%,
rgba(0,0,0,0.1) 50%,
transparent 50%,
transparent 65%,
rgba(0,0,0,0.1) 65%);
background-size: 6px 6px;
Now lets have some fun with repeating linear gradients. Here’s vertical repeating stripes:
1
2
3
4
5
6
background-image:
repeating-linear-gradient(0deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 5px,
transparent 5px,
transparent 10px);
Horizontal repeating stripes:
1
2
3
4
5
6
background-image:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 5px,
transparent 5px,
transparent 10px);
Left slanted repeating stripes:
1
2
3
4
5
6
background-image:
repeating-linear-gradient(45deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 5px,
transparent 5px,
transparent 10px);
Right slanted repeating stripes:
1
2
3
4
5
6
background-image:
repeating-linear-gradient(-45deg,
transparent,
transparent 5px,
rgba(0, 0, 0, 0.1) 5px,
rgba(0, 0, 0, 0.1) 10px);
Now lets cross them:
1
2
3
4
5
6
7
8
9
10
11
background-image:
repeating-linear-gradient(0deg,
transparent 0,
transparent 5px,
rgba(0, 0, 0, .1) 5px,
rgba(0, 0, 0, .1) 10px),
repeating-linear-gradient(90deg,
transparent 0,
transparent 5px,
rgba(0, 0, 0, .1) 5px,
rgba(0, 0, 0, .1) 10px);
And now criss-cross them:
1
2
3
4
5
6
7
8
9
10
11
background-image:
repeating-linear-gradient(-45deg,
transparent,
transparent 5px,
rgba(0, 0, 0, 0.1) 5px,
rgba(0, 0, 0, 0.1) 10px),
repeating-linear-gradient(45deg,
transparent,
transparent 5px,
rgba(0, 0, 0, 0.1) 5px,
rgba(0, 0, 0, 0.1) 10px);
Enough with stripes, let’s get square:
1
2
3
4
5
6
7
8
background-image:
linear-gradient(180deg,
rgba(0,0,0,0.05) 75%,
transparent 75%),
linear-gradient(90deg,
rgba(0,0,0,0.05) 75%,
transparent 75%);
background-size: 5px 100%, 100% 5px;
And a nice checkerboard pattern:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
linear-gradient(45deg,
rgba(0,0,0,0.1) 4.5px,
transparent 5px,
transparent 16px,
rgba(0,0,0,0.1) 16px,
rgba(0,0,0,0.1)),
linear-gradient(45deg,
rgba(0,0,0,0.1) 4.5px,
transparent 5px,
transparent 16px,
rgba(0,0,0,0.1) 16px,
rgba(0,0,0,0.1));
background-position: 0 0, 8px 8px;
And let’s make those diagonal:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
linear-gradient(45deg,
rgba(0,0,0,0.1) 25%,
transparent 25%),
linear-gradient(-45deg,
rgba(0,0,0,0.1) 25%,
transparent 25%),
linear-gradient(45deg,
transparent 75%,
rgba(0,0,0,0.1) 75%),
linear-gradient(-45deg,
transparent 75%,
rgba(0,0,0,0.1) 75%);
background-size: 10px 10px;
Now that we have them diagonal, lets spice them up and turn them into an argyle pattern:
1
2
3
4
5
6
7
8
9
10
11
12
background-image:
linear-gradient(right top,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 50%,
transparent 50%,
transparent),
linear-gradient(left top,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 50%,
transparent 50%,
transparent);
background-size: 12px 12px;
OK, now lets take another look at stripes. But this time we want to shake things up about. We want to get out to the monotony of strictly repeating patterns, but still have a pattern. What I’m talking about is sometimes called the Cicada principle. It produces a pattern that doesn’t repeat itself exactly. It does this my layering different repeating patterns, except that these are different proportions, similar to the progression of prime numbers. Using this principle, I’ve created a series of overlapping lines that creates a textile like pattern that retains it’s randomness. Here’s the CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
background-image:
linear-gradient(left,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 25%,
transparent 25%,
transparent),
linear-gradient(left,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 15%,
transparent 15%,
transparent),
linear-gradient(left,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 15%,
transparent 15%,
transparent),
linear-gradient(top,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 17%,
transparent 17%,
transparent),
linear-gradient(top,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 15%,
transparent 15%,
transparent),
linear-gradient(top,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 13%,
transparent 13%,
transparent);
background-size: 10px 100%, 17px 100%, 21px 100%, 100% 10px, 100% 17px, 100% 21px;
backgroud-position: 0 0, 6px 0, 14px 0, 0 0, 0 6px, 0 16px;
Now lets play with radial gradients. We’ll start with basic patterns and build up to more complex combinations.
1
2
3
4
5
6
7
background-image:
radial-gradient(
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 45%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0) 95%);
background-size: 8px 8px;
Now we’ll take the above pattern and turn the dots inside out so that the pattern looks like someone cut holes in the color.
1
2
3
4
5
6
7
background-image:
radial-gradient(
rgba(0,0,0,0),
rgba(0,0,0,0) 50%,
rgba(0,0,0,0.1) 55%,
rgba(0,0,0,0.1) 95%);
background-size: 10px 10px;
Now we’ll just play with the size of circles a bit.
1
2
3
4
5
6
7
background-image:
radial-gradient(
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 9px,
rgba(0,0,0,0) 9px,
rgba(0,0,0,0) 17px);
background-size: 18px 18px;
OK, I now the above patterns are not revolutionary or anthing. Now we’re going to get creative. For the next ones we’re going to user colors, yeah! The next pattern has a gold background with orange and greenish polka dots:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
radial-gradient(
rgba(255,0,0,0.2),
rgba(255,0,0,0.2) 4px,
rgba(255,255,255,.10) 5px,
rgba(255,255,255,.10) 7px),
radial-gradient(
rgba(0,0,0,0.2),
rgba(0,0,0,0.2) 4px,
rgba(255,255,255,.25) 5px,
rgba(255,255,255,.25) 7px);
background-size: 18px 18px;
background-color: #ffd239;
background-position: 10px 10px, 0% 0%;
The next one I call puff balls because of their look:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
radial-gradient(
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5) 90%,
rgba(255,255,255,.5)
),
radial-gradient(
rgba(255,255,255,0.01),
rgba(255,255,255,0.01) 10%,
rgba(255,255,255,255.1) 70%,
rgba(0,0,0,0) 79%,
rgba(0,0,0,0) 96%);
background-size: 20px 20px;
background-color: #ff77a1;
Here’s another gold pattern with four-pointed stars:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
radial-gradient(
rgba(255,0,0,0.2),
rgba(255,0,0,0.2) 8.5px,
rgba(255,255,255,.5) 9.5px,
rgba(255,255,255,.5) 17.5px),
radial-gradient(
rgba(0,0,0,0.2),
rgba(0,0,0,0.2) 8.5px,
rgba(255,255,255,.15) 9.5px,
rgba(255,255,255,.15) 17.5px);
background-size: 18px 18px;
background-color: gold;
background-position: 9px 9px, 0% 0%;
And here we change the background to green:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image:
radial-gradient(
rgba(255,210,57,0.42),
rgba(255,210,57,0.42) 9px,
rgba(0,0,0,0) 11px,
rgba(0,0,0,0) 15px),
radial-gradient(
rgba(0,0,0,0),
rgba(0,0,0,0) 9px,
rgba(255,210,57,1) 10px,
rgba(255,210,57,1) 15px);
background-size: 17px 17px;
background-color: #1e8e04;
background-position: 8.5px 8.5px, 0% 0%;
And finally, we do some interesting overlap with the radial gradients:
1
2
3
4
5
6
7
8
9
10
11
12
13
background-image:
radial-gradient(
rgba(255,255,255,0),
rgba(255,255,255,0.5) 14px,
rgba(255,255,255,0) 14px,
rgba(255,255,255,0) 26px),
radial-gradient(
rgba(0,0,255,0.31),
rgba(0,0,255,0.31) 14px,
rgba(255,255,255,0) 16px);
background-size: 28px 28px, 28px 28px;
background-position: 14px 18px, 0% 18px, 0% 0%;
background-color: rgba(200,250,190,0.5);
You can see these gradients in action here. You can same the page to your desktop, since it is a self-contained document.
Proposed Changes to Spec
So, as I mentioned, since January 2012 the draft for CSS gradients at the W3C has some notation changes. Really their minor, but in my opinion, not necessary. Actually, I’m irritated by them. The two owners of the document: Elika J. Etemad and Tab Atkins Jr., from Mozilla and Google respectively, have decided to make the notation more English-like by requiring prepositions for the position keywords for linear and radial gradients. So if you had a yellow to red linear gradient that ended in the bottom right, you’d need to write the following:
1
linear-gradient(to bottom right, yellow, red);
For a radial gradient, it would be
1
radial-gradient(circle at closest-side, yellow, red);
OK, so if the point is to make it more English-like, shouldn’t it be:
1
linear-gradient(to the bottom right, yellow, red)
Or better yet:
Or:
1
radial-gradient(a circle positioned at closest-side, yellow, red);
And, last time I check, a big chuck of the world doesn’t know what the English word “to” means and so it adds no clarity to what the keywords are doing. I’m totally against requiring unnecessary English grammatical constructs in to CSS. We don’t do that with HTML or JavaScript. What strikes me as really odd, one of the authors is from Mozilla. They were the guys that complained that the original Webkit notation used “to” and “from” to designate the start and end colors. Now they want to make the simpler notation more complicated. Adding prepositions to keywords for gradients will not add any new functionality nor prevent any rendering errors. They just make the notation more wordy. Fail! Making CSS more English-like is a rabbit hole down which you do not want to go.
March 23, 2012
Since writing this post there has been some ongoing discussion at CSS Working Group about the reasoning behind the use of prefixes in the new syntax. The gist of it is that prepositions actually remove the ambiguity of direction when dealing with gradients. Here’s a quote from the discussions:
The “to” keyword was added to linear gradients because there was
significant confusion about whether “top” meant “start from the top
(put the 0% color on the top)” or “point toward the top (put the 100%
color on the top)”.
Radial gradients gained keywords in an attempt to make the syntax more
flexible and more readable – previously, for example, you could have a
declaration like “radial-gradient(20% 20%, 30% 30%, black, white)”.
It’s very unclear what that means – even if you know that one of them
is a position and the other is a size, how can you tell which is
which? Due to this ambiguity, the syntax also disallowed specifying
just a size without a position.
The new syntax, while not ideal in some ways, solves this problem –
you’d write the previous example as “radial-gradient(30% 30% at 20%
20%, black, white)” which gives you some clues as to which is the size
and which is the position. As well, it’s now possible to specify
either a size or a position alone, and have it parsed unambiguously –
“radial-gradient(30% 30%, black, white)” has an explicit size and
default position, while “radial-gradient(at 20% 20%, black, white)”
has an explicit position and default size.
In light of the above I’ve been won over to support prepositions in the gradient syntax. It solves the problems described above and will make creating gradients easier for everyone.