Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using gradients as background with CSS

Monday, November 11th, 2013 by Servage

A gradient is a transition from one colour to another, sometimes through multiple colours. In the past, the only way to put a gradient on a web page was to create one in an image-editing program and add the resulting image with CSS.

CSS3 introduced the ability to specify colour gradients using CSS notation alone, leaving the task of rendering colour blends to the browser. Gradients can be applied anywhere an image may be applied: background-image, border-image, and list-style-image. We’ll stick with background-image examples in this article.

There are two types of gradients:

• Linear gradients change colours along a line, from one edge of the element to the other.

• Radial gradients start
Linear gradients
The linear-gradient() notation provides the angle of the line and one or more points along that line where the pure color is positioned (color stops). You can use color names or any of the numerical color values discussed earlier in the chapter. The angle of the line is specified in degrees (ndeg) or using keywords. Using degrees, 0deg points upward, and positive angles go around clockwise so that 90deg points to the right. Therefore you want to go from yellow on the top edge to green on the bottom edge, set the rotation to 180deg.

background-image: linear-gradient(180deg, yellow, green);

The keywords describe direction in increments of 90° (to top, to right, to bottom, to left). Our 180deg gradient could also be specified with the to bottom keyword. The result is shown in Figure 13-25 (top).

#banner {
background-image: linear-gradient(to bottom, yellow, green);

In this example, the gradient now goes from left to right and includes a third color, orange, which appears 25% of the way across the gradient. You can see that the placement of the color stop is indicated after the color value. The 0% and 100% positions may be omitted.

#banner {
background-image: linear-gradient(90deg, yellow, orange 25%, blue);

These examples are pretty garish, but if you choose your colors and stops right, gradients are a nice way to give elements subtle shading and a 3-D appearance. The button on the bottom uses a background gradient to achieve a 3D look without graphics.

a.button-like {
background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%,
#d1d1d1 51%, #fefefe 100%);

Radial gradients
Radial gradients, like the name says, radiate out from a point in a circle. In the CSS3 spec, the radial-gradient() notation describes the shape (circle or ellipse; circle is the default if no shape is specified), the position of the center of the gradient (following the same syntax as background-position), and a size, specified as a radius length or a keyword that describes the side or corner where the last color should stop (closest-side, farthest-side, closest-corner, farthest-corner, cover, contain).

#banner {
background-image: radial-gradient(center contain yellow green);



Resources for further reading

Using gradients as background with CSS, 4.0 out of 5 based on 4 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.