Let's start with this technique to make a linear background gradient for the sidebar of the AND THE WINNER ISN'T site:

aside {
    border-right-color: #e8e8e8;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 58px;
    padding-left: 1.5%; 
    padding-right: 1.0416667%; 
    margin-left: 1.0416667%; 
    float: left;
    width: 20.7083333%; 
    background: url(../img/sidebarBg2.png) 50% repeat-x;
} 

Here's how it looks in a browser:

However, it still requires trips to the graphics editor when we want to amend the effect. Plus occasionally, content can 'break out' of the gradient background, extending beyond its fixed size limitations. This problem is compounded with a responsive design, as we want the page structure to have the ability to change shape (for example, getting longer or wider) significantly without breaking up the design.

For example, let's suppose I wanted to add another two films in each section. Here's what happens:

It's not terrible but the grey gradient certainly isn't spanning the whole sidebar section, as I'd like. Ordinarily, I'd have to head back to my graphics editor and re-make the graphic. With a CSS3 gradient however, things are far more flexible. Here's the syntax for the same gradient in pure CSS3, instead of using an image:

background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%,#ffffff 100%);

And here's how it looks in a supporting browser:

No matter how long that section gets (after all, there are plenty of films I could enthuse and moan about in equal measure), the CSS3 gradient will always cover the area.

The only significant fly in the ointment of background gradient nirvana is that they aren't supported as well as some of the other CSS3 features. Internet Explorer 9 doesn't have native support for them for instance (although it is promised for Internet Explorer 10). However, background gradients are supported in most other browsers, albeit with vendor prefixes. It shouldn't stop you from using them to enhance designs for browsers that support them now and others that will in the near future. As a fallback for older browsers, it's sometimes preferable to define a solid background color first so that older browsers at least render a solid background if they don't understand the gradient rules.

CSS3 background gradients aren't limited to linear gradients. It's equally simple to create a radial gradient. These begin from a central point and spread out smoothly in an elliptical or circular shape.

Here's the syntax for a radial background gradient:

background: radial-gradient(center, ellipse cover, #ffffff 72%,#dddddd 100%);

Adding this declaration to our #content rule results in the following effect:

See that subtle darkening at the corners? That's our radial gradient. Let's break the syntax down to see what's going on.

Breakdown of radial gradient syntax

After specifying the property (background:) we specify that we'd like a radial-gradient (rather than a linear one). Then, within parenthesis we specify the starting point. In the previous example, we used center but we could equally use something like 25px 25px to start 25 px from the top and left of the element. For example:

background: radial-gradient(25px 25px, ellipse cover, #ffffff 72%,#dddddd 100%);

This line of code produces the following effect:

The center is 25 px from the top left of the element and then radiates smoothly outwards.

The next value in our declaration is more straightforward; it's the shape and size the radial gradient should take:

background: radial-gradient(center, ellipse cover, #ffffff 72%,#dddddd 100%);

For shape, the options are either circle (the gradient will radiate uniformly in all directions) or ellipse (which will radiate different amounts in different directions). However, there's quite a bit of flexibility in how the shape is sized. The size can be any of the following:

• closest-side: the shape meets the side of the box nearest to the center (in the case of circles), or meets both the horizontal and vertical sides that are closest to the center (in the case of ellipses)
• closest-corner: the shape meets exactly the closest corner of the box from its center
• farthest-side: the opposite of closest-side, in that rather than the shape meeting the nearest size, it's sized to meet the one farthest from its center (or both the furthest vertical and horizontal side in the case of an ellipse)
• farthest-corner: the shape expands to the farthest corner of the box from the center
• cover: identical to farthest-corner
• contain: identical to closest-side

It's then a matter of defining the starting point, color stops, and end point (in exactly the same manner as linear gradients).

For example, if we changed our rule to this:

background: radial-gradient(20px 20px, circle cover,hsla(9,69%,85%,0.5) 0%,hsla(9,76%,63%,1) 50%,hsla(10,98%,46%,1) 51%,hsla(24,100%,50%,1) 75%,hsla(10,100%,39%,1) 100%);

You can see we are starting 20 pixels from the left and top, using a circle to cover the area and using multiple HSL(A) color stops. Here's how it looks:

Hopefully, while this isn't the best lesson in aesthetics, it demonstrates the power of using pure CSS3 to achieve visual effects.

Note

Read the W3C specification for radial background gradients at: http://dev.w3.org/csswg/css3-images/#radial-gradients

Tip

The cheat's way to perfect CSS3 linear and radial gradients

If writing out a CSS3 gradient seems like hard work there are some great online gradient generators. My personal favorite is http://www. colorzilla.com/gradient-editor/. It uses a graphics editor style GUI, allowing you to pick your colors, stops, gradient style (linear and radial gradients are supported), and even the color space (HEX, RGB(A), HSL(A)) you'd like the final gradient in. There are also loads of preset gradients to use as starting points. If that wasn't enough, it even gives you optional code for fixing up Internet Explorer 9 to show the gradient and a fallback flat color for older browsers. Still not convinced? How about the ability to generate a gradient based on an existing image? Thought that might swing it for you.

CSS3 also gives us the ability to create repeating background gradients. Let's take a look at how it's done:

background: repeating-linear-gradient(90deg, #ffffff 0px,hsla(0, 1%, 50%,0.1) 5px);

And here's how that looks applied to the sidebar:

Firstly, prefix the linear-gradient or radial-gradient with 'repeating', then it follows the same syntax as a normal gradient. Here I've used pixel distances between the white and grey colors (0px and 5px respectively) but you could also choose to use percentages. For best results, it's recommended to stick to the same measurement units (such as, pixels or percentages) within a gradient.

Let's try a repeating radial gradient:

background: repeating-radial-gradient(2px 2px, ellipse,hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);

It's very similar to the standard radial gradient used earlier. I've merely amended the start point, removed the 'cover' value as it's not needed and then set distances for each color stop in pixels. My end point is 20px so the pattern repeats every 20 pixels. Here's that rule applied to the body. I'll warn you now—it isn't pretty!

There's one more way of using background gradients I'd like to share with you.