HTML and CSS Reference
In-Depth Information
Chapter 15
Gradients
A gradient is a color fill that blends smoothly from one color to another. Introduced in
CSS 3, the gradient functions can be used anywhere an image is required according to
specification, but they are mainly used together with the
background
or
background-image
properties to create a background gradient.
Linear gradients
The
linear-gradient()
function defines a gradient that provides a smooth transition
from one color to another.
linear-gradient([<angle> | to <side-or-corner>]
{, <color stop> [stop position]} (2-∞) )
In its simplest form, the linear gradient consists of two colors with an even spread
from top to bottom. In Figure
15-1
, the gradient starts as gray and transitions into black at
the bottom.
.mygradient {
background-image: linear-gradient(gray, black);
}
Figure 15-1.
Simple linear gradient
