CSS Gradients and Transitions

One of the features I like best about CSS Level 3 is the ability to easily add gradient fills for backgrounds. Simple background colors have been available since the early days of the World Wide Web, but until HTML 5 and CSS3 came along, the only way to add a gradient fill was with a graphic file. Gradients seem to be an object of scorn in the professional website design community, which considers them to be overused. I'm as guilty as anyone of adding gradients just for the fun of it, but it was the article titled Everything You Wanted To Know About Gradients by Ethan Marcotte that really inspired me to play with this visual effect and present them in this tutorial. I understood simple gradients, but I wanted to really understand them and Marcotte's article really helped explore the possibilities. While I always try to make all of my tutorials cross-browser compatible, but Internet Explorer just doesn't support much of what I'm presenting here. This is a demonstration, rather than a tutorial. I just wanted to present you with some new possibilties in website design. What I ended up with was a work-in-progress that I hope to expand and improve over time. So, please forgive the length of this article and the lack of organization. If you see something you like, come back again in a couple of weeks and you should find some additions and improvements.

To get back to the topic, as usual, we have to deal with cross-browser compatibility issues with regard to CSS gradients. Fortunately, the Webkit folks have added support for the Mozilla/W3C syntax for both linear and radial gradients, so while you still have to add separate property settings for both browser families using the proper prefix, you no longer have to worry about the differences in syntax, which are as follows:

[-moz-||-webkit-]linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

[-moz-||-webkit-]radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Basic CSS Gradients

The most common use of gradients is to provide a pleasing background for a section of your webpage or occasionally for the background of the entire page. I've included some basic examples of linear gradients here. The top spectral gradient taken from the W3C example page uses the simplest syntax consisting only of a starting point and a list of color names:

background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

From there, I created a grayscale gradient with seven color stops to create a smooth, gradual transition from one level to the next, with a 30 degree angle to demonstrate that option, using:

background-image: linear-gradient(left 20deg, #fff 5%, #c0c0c0 20%, #a0a0a0 30%, #808080 50%, #404040 70%, #202020 90%, #000 100%);

And finally, I made a vertical gradient where the color shading starts off at the top with a dark green, ramps up to a light green peak, and then ramps back down to the original dark green. You often see menu bars and headline blocks use images to achieve this effect. Here we rely only on CSS, with:

background-image: linear-gradient(top, rgb(0,135,72) 0, rgb(120,255,138) 50%, rgb(0,135,72) 90%);

Naturally, you want your stylesheets to cascade through the separate instructions for the various browsers' specific CSS property names, like "-moz-linear-gradient" for Firefox, "-webkit-linear-gradient" for Chrome and Safari, "-o-linear-gradient" for Opera, and the official W3C standard of "linear-gradient", with a default setting at the beginning for older browsers and (for the foreseeable future) Internet Explorer.

Radial gradients in CSS have some interesting capabilities, too. You can start anywhere you like, spread out to the edges of the containing element or constrain the effect to within it, and use the familiar color stops any way you prefer.

To learn more, see Art of Web's excellent article on radial gradients that demonstrates many creative uses for this new CSS property, and how to take advantage of the differences in the CSS syntax for Firefox/Mozilla and Chrome/Webkit browsers.

CSS Gradient Image Masking Effects

CSS gradients aren't limited to making pretty backgrounds. One of the design issues I often struggle with is to make the images on my webpages stand out, or at least look less like a photograph pasted into a scrapbook. So I usually add some CSS styling to my display images to give them some pop. I generally add a box-shadow or a white border, depending on the theme and tenor of the website. But I'm always looking for something new, and CSS3 has added a nifty feature: background image gradients. A background image gradient let's you display your images with a flair. The first example on the left here shows an image with a feathered bottom edge using a linear gradient mask. The CSS settings are:

       background-image: linear-gradient(bottom,
	rgba(255,255,255,1) 1%,
	rgba(255,255,255,.8) 5%,
	rgba(255,255,255,0) 15%),
	url('images/myImage.jpg');

Using the alpha channel through an rgba color setting, the opacity of the white background color controls how much of the background image bleeds through the mask. With an alpha channel set to 1 on the mask, none of the image bleeds through, and with a setting of 0, the image is fully opaque. Since I just want the effect on the far left edge, I chose settings that start to ramp up to full opacity at just 3% from the edge of the image, and by 15% the image is fully visible.

The second image is a classic vignette effect using a radial gradient mask on the same image. Using a starting point of "50% 50%" to center the gradient, the idea is to use no masking until we get close to the edges of the image, and then ramping the settings up smoothly until we reach 100% masking. I tried many settings, but this looks pretty good.

   background-image: radial-gradient(50% 50%, farthest-side,
    rgba(255,255,255,0) 80%,
    rgba(255,255,255,.1) 87%,
    rgba(255,255,255,.2) 93%,
    rgba(255,255,255,.4) 95%,
    rgba(255,255,255,.8) 97%,
    rgba(255,255,255,1) 99%
    ), url('images/myImage.jpg');

Image Captions Using CSS Gradients

Here is our caption.

The CSS size settings are in percentages, so the size adjusts to fit. The background gradient's colors are set with rgba, so the text is fully opaque.

When it comes to website design, I always try to steal from the best. So when I spotted an attractive image caption design on CNN.com that used a gradient, I thought I'd try to replicate it. The goal is to overlay an image with a caption overlaid on the right half of the image that still allows some of the image to bleed through. The method I chose was to create a containing <div> for the image, with the image itself in a <div> set to position:absolute and its z-index set to 1, overlaid with a <div> for the caption that is sized to 50% of the image and positioned right:0 with a z-index of 2. The key is to give the caption's <div> a background image that uses a gradient that relies on rgba for the color settings in order to provide control over the alpha channel for transparency. I came pretty close, but it needs tweaking. CNN used this on large vertical images, which was much more attractive. Still, this is the basic idea. Check the source code for this page to see the actual CSS code. For more details, see my transparent CSS captions tutorial.

In the end, I wasn't satisfied with my attempts to replicate this effect. I tried to fine-tune it many times, but just never found a great combination. My frustration led me to write a PHP script that lets you create a transparent background image with optional gradient. It lets you easily create a translucent PNG graphic using any color you like, with the option of a gradient transparency level so that the background goes from solid at one edge to fully transparent at the opposite edge. Check it out!

The folks at Colorzilla have a great cross-browser CSS Gradient Editor that will let you create your own CSS gradient settings with an interactive tool that lets you see your gradients as you adjust them. And, best of all, the settings work in most version of Internet Explorer via the filter: property - which I rarely use, but should.

CSS Transitions and Animations

With HTML 5, the web takes a giant leap toward improved user interaction and enhanced visual effects. Among these are transitions, which provide gradual changes in the appearance of the selected elements. You set transition to select the CSS properties you want to have changed, along with a duration setting. Then when the transition fires with hover, the selected properties will slowly change from the old settings to those in the :hover settings. I've provided a simple example here that's much like those you've probably seen elsewhere, but it does show the possibilities of transitions. Just mouse over the box to see the effect.

One simple and practical example of how transitions can enhance a page is for a simple menu bar, as seen above. Instead of having the appearance change immediately on a hover event, transitions allow for a gradual change. It's the kind of effect that used to require JavaScript or Flash to achieve in CSS Level 2. See for yourself by mousing over the menu items and you'll see the colors of the font and background gradually change. And this is one effect where you don't have to worry about compatibility because older browsers will just see the hover effects take place immediately. The HTML is just a plain <div> I named "fauxMBar" and it contains four <a>nchor tags. The CSS for this couldn't be simpler:

#fauxMBar { width:420px; margin:0 auto; }

#fauxMBar a { float:left; width:23%; height:20px; padding-top:4px;
   background-color:#008000; border:solid 1px blue;
   text-align:center; font-weight:bold; text-decoration:none; color:white;
   -moz-transition:all 1s; /* Firefox 4 */
   -webkit-transition:all 1s; /* Safari and Chrome */
   -o-transition:all 1s; /* Opera */
   transition:all 1s; /* Standards support */
 }

#fauxMBar a:hover { text-decoration:underline; color:black; background-color:lightyellow; }

I set the transition property to "all" so that the transition would be applied to every available property and set it to 1 second so that it would work just fast enough to be pleasing. On a good day, I'd set the width and border properties properly, but this is just an example. You can find out more about transitions on the Mozilla Developer website.

Scaled Vector Graphics

Since the beginning of the web, designers have wanted to be able to simply draw on their pages. With HTML5, Scaled Vector Graphics (SVG) now give designers the ability to do just that with some powerful graphic primitives that you can use to draw shapes and text with both fill and stroke settings.

This page was last modified on April 14, 2012

CSS Tutorial Main Page • Tools and Scripts Menu