Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Extra Depth with Gradients
Web designers love gradients! Nothing is more effective for giving a UI a feeling of depth, texture, and shine than using a color gradient. Before CSS3, we had to create a gradient image in a graphics editor and then tile it horizontally or vertically (which is rather inflexible), or use SVG gradients, which are supported fairly well these days but less familiar to developers than CSS. CSS3 allows us to create linear or radial gradients programmatically and attach them to HTML elements as background images. Linear gradient syntax looks like this:
background: -webkit-linear-gradient(to bottom right, #aaa, #444); background: -moz-linear-gradient(to bottom right, #aaa, #444); background: -ms-linear-gradient(to bottom right, #aaa, #444); background: -o-linear-gradient(to bottom right, #aaa, #444); background: linear-gradient(to bottom right, #aaa, #444);
While radial gradient syntax looks like this:
background-image: -webkit-radial-gradient(30% 40%, #aaa, #444); background-image: -moz-radial-gradient(30% 40%, #aaa, #444); background-image: -ms-radial-gradient(30% 40%, #aaa, #444); background-image: -o-radial-gradient(30% 40%, #aaa, #444); background-image: radial-gradient(80% 80% ellipse at 30% 40%, #aaa, #444);
And the outputs look like Figure 3 and Figure 4, respectively.
)
Figure 3 Applying a linear gradient to our example box, using a linear-gradient value on the background-image property.
)
Figure 4 Applying a radial gradient to our example box by using a radial-gradient value on the background-image property.
The examples above are very simple. To make things more complex, you can insert multiple color stops like so (see Figure 5):
background-image: -webkit-radial-gradient(30% 40%, #444, #999, #444, #999); background-image: -moz-radial-gradient(30% 40%, #444, #999, #444, #999); background-image: -ms-radial-gradient(30% 40%, #444, #999, #444, #999); background-image: -o-radial-gradient(30% 40%, #444, #999, #444, #999); background-image: radial-gradient(80% 80% ellipse at 30% 40%, #444, #999, #444, #999);
)
Figure 5 A gradient with multiple color stops.
You can even create repeating gradients, which repeat the same small amount of specified gradient over and over again (see Figure 6):
background-image: -webkit-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -moz-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -ms-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -o-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: repeating-radial-gradient(80% 80% ellipse at 30% 40%, #aaa 0px, #444 50px, #aaa 100px);
)
Figure 6 A repeating gradient, created by using a repeating-radial-gradient value on the background-image property.
For more detail on the options available, check out my Dev.Opera articles "CSS3 Linear Gradients" and "CSS3 Radial Gradients."
Gradients tend not to be a huge problem in non-supporting browsers—they don't ruin layout or do anything terrible in most cases—but you should be sure to include a solid color as a fallback, in case browsers can't render the gradient:
background-image: -webkit-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -moz-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -ms-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: -o-repeating-radial-gradient(30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-image: repeating-radial-gradient(80% 80% ellipse at 30% 40%, #aaa 0px, #444 50px, #aaa 100px); background-color: #aaa;