HTML and CSS Reference
In-Depth Information
Radial Gradient Background
While the linear gradient is perfect for a gradient moving from one direction to another, of-
ten the need for a radial gradient arises (see
Figure 7.6
). Radial background gradients work
just like linear gradients and share many of the same values. For radial gradients, instead of
using the
linear-gradient()
function within the
background
or
background-
image
property, we'll use the
radial-gradient()
function.
1.
div {
2.
background: #466368;
3.
background: radial-gradient(#648880, #293f50);
4.
}
Figure 7.6
A radial gradient background transitioning from the center of an element to
the outside of an element
Radial gradients work from the inside to the outside of an element. Thus, the first color
identified within the
radial-gradient()
function will sit in the absolute center of the
element, and the second color will sit on the outside of an element. The browser will then
create the transition between the two colors.
One of the primary differences between radial gradients and linear gradients is that radial
gradients can be quite complex, with values for location, size, radius, and so forth. We'll
Search WWH ::
Custom Search