HTML and CSS Reference
In-Depth Information
the padding starts, which is about 97% of the height of the
.promo
element. With this gradi-
ent in place,
Figure 5.11
shows us what our promo section now looks like.
Figure 5.11. The small gradient below the big promo image
Radial Gradients
All the gradients on ReciperFinder are linear gradients, but CSS lets us create another kind of
gradient―a
radial gradient
. A radial gradient creates a circular gradient. The syntax is sim-
ilar to that of a linear gradient, but has some extra optional parameters. Let's look at a simple
example:
.example {
width: 300px;
height: 300px;
background-image: radial-gradient(pink, red);
}
That's as simple as it gets―a two-color radial gradient. The result in the browser would look
something like
Figure 5.12
.
