<gradient>

The <gradient> in CSS is an <image> made of two or more colors that smoothly fade from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things.

CSS gradients are not colors, i.e. can not be used as a <color> value for properties.

As with the other <image> types defined in CSS, gradients can be used in any property that accepts images (<image> values), like, for example, the background-image property.

A CSS gradient does not have an intrinsic size or ratio like some other types of images. Its size depends on the element it is applied to. For example, if you use a gradient as a background, by default the gradient will draw into a gradient box the size of the element’s padding box. If background-size is explicitly set to a value such as 100px 200px, then the gradient box will be 100px wide and 200px tall. Similarly, for a gradient used as a list-style-image, the box would be a 1em square, which is the default object size for that property.

A gradient in CSS can be a linear gradient, radial gradient, or a repeating gradient composed of one of these two gradient types:

<gradient> = [ 
    <linear-gradient> | <radial-gradient> | 
    <repeating-linear-gradient> | <repeating-radial-gradient> ]
                

A linear gradient is created using the linear-gradient() function, where the colors are placed along an imaginary gradient line. The line can be horizontal, vertical, or diagonal taking any angle value. The direction of the line and the colors specified are all defined in the function.

A radial gradient is created using the radial-gradient() function. In a radial gradient, rather than colors smoothly fading from one side of the gradient box to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.

A repeating linear or radial gradient is created using either the repeating-linear-gradient() function or the repeating-radial-gradient() function, depending on which type of gradient you want to repeat. The repeated gradient has a fixed size and is repeated as much as needed to fill the entire container’s box.

You can read more about creating different gradients and more complex and practical examples in the entry corresponding to each of the above-mentioned gradient functions.

Trivia & Notes

CSS gradients are not transitionable in CSS except in IE10+. Usually, an illusion of gradient color transitions is created by transitioning the position of the gradient image on an element. You can read more about this in the article Animating CSS3 Gradients by Louis Lazaris.

Repeating gradients can be used to create very beautiful and interesting background patterns. Lea Verou has created a nice CSS3 patterns gallery that showcases a lot of patterns created using gradients, so make sure you check that out, and read more about gradients to learn how you can create your own patterns.