HTML and CSS Reference
In-Depth Information
Chapter 15
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
Search WWH ::

Custom Search