A previous post introducing CSS3 lightly touched on gradients and demonstrated a simple linear gradient using the background-image property including gradient and linear-gradients. This segment of gradients will dive a little deeper into various other effects that can be used to manipulate the gradient property within web page documents. Gradients in CSS3 can include color stops, including even stops, arbitrary stops, linear-gradients, linear backgrounds, radial centers, and radial positions.

Simple linear gradient

The example CCS3 code below is for a simple top to bottom gradient; note the fallback color and png image referenced before the prefix gradients, and then the prefixes for Safari, Chrome, Firefox, IE, and Opera are listed next.

Syntax differences

Depending on the browser, the syntax changes up just a bit as you will see in the syntax and prefix examples for Mozilla Firefox (-moz), Safari and Chrome (-webkit), and Opera (-o-).

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background. You specify a gradient value instead of an image URL. Here is the syntax for Mozilla Firefox:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Point is a position, interpreted in the same way as background-position or -moz-transform-origin. This is used to define the starting point of the gradient. It can be specified as a percentage, in pixels, or using “left”, “center”, or “right” for horizontal and “top”, “center”, or “bottom” for vertical positioning. Positions start from the top left corner of the affected element. If only one of the horizontal or vertical positioning is specified, the other direction defaults to “center”.
Angle is an angle direction for the gradient.
Stop is the value comprised of a <color> value, followed by an optional stop position (either a percentage between 0% and 100% or a <length> along the gradient axis).

Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

Safari and Chrome utilize the background-image with -webkit- prefix:

background-image: -webkit-gradient-linear([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

Note the difference with respect to the way linear gradient is referenced for -webkit- for Safari 4+, Chrome 1-9:

background-image: -webkit-gradient(linear [<point> || <angle>,]? <stop>, <stop> [, <stop>]);

Opera supports CSS3 gradients in a similar format with the -o- prefix:

background-image: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

CSS3 sample code for a simple top down gradient:

.gradient1-bg {
/* fallback color  */
background-color:#CCFFFF;
/* fallback image    */
background-image: url(images/fallback-gradient1.png);
/* Safari 4+, Chrome 1-9  */
background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(#CCCCFF), to(#CCFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #CCCCFF, #CCFFFF);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #CCCCFF, #CCFFFF);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #CCCCFF, #CCFFFF);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #CCCCFF, #CCFFFF);
height: 100px;
padding: 5px;
margin-left:5px;
}

You might wonder, why put in the image reference as a fallback if you are using special gradient properties? The primary benefit to your website is that the browsers which support the gradient styling properties skip over the image reference, which ultimately reduces the total HTTP requests and, therefore, helps increase site load times.

Below is the example HTML code for this linear gradient, resulting in Figure A as rendered in Chrome 15.0.874:

<div class="gradient1-bg"><p>Simple top down gradient</p></div>

Figure A

Top left to bottom right gradient

Using angles to modify the gradient only requires -45% in the -webkit for older versions of Safari 4+, Chrome 1-9, and then -45deg for the remaining prefixes as displayed in the following example:

.gradient2-bg {
/* fallback color  */
background-color: green;
/* fallback image    */
background-image: url(images/fallback-gradient2.png);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, -45% 0%, 0% 0%, from(green), to(yellow));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(-45deg, green, yellow);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(-45deg, green, yellow);
/* IE 10+ */
background-image: -ms-linear-gradient(-45deg, green, yellow);
/* Opera 11.10+ */
background-image: -o-linear-gradient(-45deg, green, yellow);
height: 200px;
width:200px;
padding: 5px;
margin-left:5px;
}

With the example HTML code below, this code results in Figure B as rendered in Chrome 15.0.874:

<div class="gradient2-bg"><p>Angular top left to bottom right gradient</p></div>

Figure B

Radial gradients

Now that we have studied linear gradients and have that under our belts, let’s take a look at creating radial gradients. We utilize the radial-gradient property, which works with Firefox, Safari, Chrome, and Opera as of this writing.

First, let’s study the base syntax before we get into some sample code 

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Where the following values have the corresponding descriptions:

Position is interpreted in the same way as background-position or transform-origin. If omitted, the default is center.
Angle establishes the gradient line, which extends from the starting point at this angle; this is 0deg by default.
Shape is circle (meaning that the gradient’s shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). The default value is ellipse.
Size constants can be closest-side, closest-corner, farthest-side, farthest-corner, or contain, which is a synonym for closest-side, and cover, which is a synonym for farthest-corner.
Stop value is comprised of a <color> value, followed by an optional stop position (either a percentage between 0% and 100% or a <length> along the gradient axis). Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

According to the Mozilla Developers Network, radial gradients also run along an axis. At each end point of the axis, a radius is specified. This can be imagined as creating two “circles”, where for each circle the center is specified by the point and the radius is specified by the radius length. The gradient runs outwards from the circumference of the inner circle to the circumference of the outer circle.

The following example radial gradient CSS3 code sets the position to center, with the shape as a circle, and with colors stops going from black to red.

.radial-center {
/* fallback color */
background-color: red;
/* fallback image */
background-image: url(images/radial_center.png);
background-position: center center; background-repeat: no-repeat;
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, black, red);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 200, from(black), to(red));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, black, red);
height: 200px;
width:200px;
padding: 5px;
margin-left:5px;
}

See the example HTML code resulting in Figure C as rendered in Chrome 15.0.874:

<div class="radial-center"><p id="font">Radial center gradient</p></div>

Figure C

Closest side

The closest side value is synonymous with the contain value, and in this example we will set the radial with the center positions to 50px 50px as a circle shape, which sets the gradient edges to meet the sides of the element that are closest to the gradient’s center:

.radial-closest-side {
/* fallback color */
background-color: #2F2727;
/* fallback image */
background-image: url(images/radial_cs.png);
background-repeat: no-repeat;
/* Firefox 3.6+ */
background-image: -moz-radial-gradient(50px 50px, circle closest-side, #1a82f7, #2F2727);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-radial-gradient(50px 50px, circle closest-side, #1a82f7, #2F2727);
height: 200px;
width:200px;
padding: 5px;
margin-left:5px
}

This example renders at the top left of the division as displayed in Chrome 15.0.874:

Figure D

Closest corner

Now we will use the closest-corner size where this value causes the gradient’s edge to meet the corner of the element that’s closest to the center position of the gradient, which causes part of the gradient’s top and left shape to be cutoff somewhat; this is a result of the gradient being pushed into the corner of the element. The only update to the above code example is to change the size values from closest-side to closest-corner in each of the browser properties. Note the webkit example shown below and the result as displayed in Chrome 15.0.874:

background-image: -webkit-radial-gradient(50px 50px, circle closest-corner, #1a82f7, #2F2727);

Figure E

Farthest side

Farthest side value does the opposite of the closest corner, and causes the gradient’s edges to meet the sides of the element that are farthest from the gradient’s center, the gradient is forced to stretch to touch the farthest edges of the element. In this example the only change to the property was to update the size value to farthest-side in each of the browser properties. The result is displayed in Chrome 15.0.874 below:

Figure F

Farthest corner

The farthest corner value which is synonymous with the cover value causes the gradient to stretch to the corner of the element that is farthest away from the gradient’s center position so that the gradient covers much more of the element. In this instance the only change was to update the size value to radial-farthest-corner in each of the browser properties. The result is displayed in Chrome 15.0.874 below:

Figure G

In the next segment on CSS3 Gradients we will have more fun with setting arbitrary color stops, and even color stops with both linear and radial gradients.