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.
Click here to view code image
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