HTML and CSS Reference
Creating a Gradient
• To create a linear gradient, apply the function
linear-gradient( position || angle , color-stop , color-stop , …)
where position is the starting point of the gradient using the keywords left , right ,
top , and bottom ; angle is the angle of the gradient; and color-stop is the position
and color of each color (entered as color position ).
• To create a radial gradient, apply the function
radial-gradient( center , shape size , color-stop , color-stop , …)
where center is the position of the radial gradient's center, shape is the gradient's
shape, size is the size of the gradient, color is the initial color at the center, and
color-stop is a color and its position within the radial gradient.
• To create a linear gradient in WebKit, apply the function
-webkit-gradient(linear, start , stop , from( color ), color-
stop( percent , color ), to( color ))
where start provides the starting location of the gradient, stop defines the gradi-
ent's stopping location, color is a color value or color name, and the color-stop()
function identifies the location and color of an intermediate color in the gradient.
• To create a radial gradient in WebKit, apply the function
-webkit-gradient(radial, inner-center , inner-radius , outer-center ,
outer-radius , from( color ), color-stop( percent , color ), to( color ))
where inner-center and outer-center set the centers of the first and last color
in the color list, respectively; inner-radius sets the endpoint of the first color; and
outer-radius sets the starting point of the last color.
• To create a linear gradient in Internet Explorer, apply the filter
Gradient(gradientType= type , startColorStr=#rrggbb ,
where type is either 0 for a vertical gradient or 1 for a horizontal gradient,
startColorStr indicates the starting color, and endColorStr indicates the
Obviously, to provide cross-browser support for gradients, you need to cover all of the
possible browser extensions as well as the CSS gradient functions. Given the complexity
of creating cross-browser gradient styles, you and Kevin agree to limit your style sheet to
the CSS3 gradient functions. You'll use the linear-gradient() function to add a verti-
cal gradient to the article element.