Menu

Austin Web Design Blog

Simple CSS3 Gradients

If you find yourself making lots of background images for the sake of tiling gradients, here is another option for you using CSS. CSS3 gradients are now supported in most modern browsers making them increasingly more useful. For all other browsers you can specify either a fallback image or a solid background color. If you can live with non-supporting browser users having a slightly less aesthetically pleasing experience upon visiting your site, you can go ahead and ditch the images altogether.

Basic CSS Gradient Styles

Here is the basic CSS code to generate a gradient from top to bottom. It’s pretty self-explanatory. Specify type of gradient (linear, radial, diagonal, specify the starting location (top, bottom, left, right), specify starting and ending colors.

background: linear-gradient(top, #000000, #dddddd);

This code alone as of this writing will not work in any major browsers. Browser-specific prefixes will be necessary, so the code will get quite lengthy.

Browser Support for CSS3 Gradients – Pick Your Poison

Which browsers are you targeting with your current project? Using the example above, follow these code examples depending on the browsers you’re trying to target. It’s quite a mess of code, but this is it in its simplest form.

IE 6-10

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#000000’, endColorstr=’#dddddd’,GradientType=0 );

Safari 5.1+, Mobile Safari, Chrome 10+

background: -webkit-linear-gradient(top, #000000, #dddddd);

Firefox 3.6+

background: -moz-linear-gradient(top, #000000, #dddddd);

Opera 11.10+

background: -o-linear-gradient(top, #000000, #dddddd);

Safari 4+ and Chrome 1-9

background: -webkit-gradient(linear, 0% 0%, 0% 100%, (#000000), to(#dddddd))

Fallbacks for the Pesky Browsers

In CSS order is important. Add a background-color: #000000 before your list of declarations so that there is a background color for browsers to fall back on should they not support gradients. Your website will still be visible and usable. If you want to ensure that your pretty gradients are picked up by all browsers, also add a background-image: declaration right below the background-color and before your gradient declarations. Then change all of your browser-specific background declarations to background-image declarations so they override the fallback declaration. Your CSS will look like this if you are targeting as many browsers as possible:

background-color: #000000;
background–image: url(some_image.jpg);
background–image: linear–gradient(top, #000000, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#000000’, endColorstr=’#dddddd’,GradientType=0 );
background–image: –webkit–linear–gradient(top, #000000, #dddddd);
background–image: –moz–linear–gradient(top, #000000, #dddddd);
background–image: –o–linear–gradient(top, #000000, #dddddd);
background–image: –webkit–linear–gradient(top, #000000, #dddddd);

To see how they work, check out this sample page. Check the page in different browsers and watch different boxes light up. The final box will work in most all browsers.

Tools

If you find this all difficult to remember or want to grab some code quickly, try out these gradient generators:

Colorzilla’s Ultimate CSS Gradient Generator

CSS3, please!

CSS3 Gradient Generator by Damian Galarza

Further Reading

CSS Tricks

Fri, 11 Nov 2011 16:25

Tags , , , , , , , ,

Comment Simple CSS3 Gradients