HTML and CSS Reference
In-Depth Information
cover the basics, but please feel free to delve further into radial gradients, as they provide
much more power than is outlined here.
CSS3 Gradient Background Generator
Working with CSS3 gradients by hand can be quite difficult at times, especially if
you are new to them. Fortunately, a few CSS3 gradient generators (
ht-
fault.html
)
have popped up. Each generator works a little differently, and some
provide more options than others. If you're interested, I recommend doing some
research to find the right generator for your needs.
Gradient Color Stops
At a minimum, gradient backgrounds will transition from one color to another; however,
we may add multiple colors to a gradient and have the browser transition between all of
them (see
Figure 7.7
)
. To do this we'll add color stops to the given gradient function, with
commas separating each color stop from the next.
1.
div {
2.
background: #648880;
3.
background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
4.
}
Search WWH ::
Custom Search