CSS3 gradients are the next big thing

Truth be told, I don’t really know if CSS3 gradients are the next big thing or not but, with increasing support in modern browsers, they are being used more and more. Like many other CSS3 properties, gradients allow us to create image-like properties with a few lines of code, thus saving on image requests, and make it easy to change backgrounds quickly and easily without using Photoshop or Fireworks.

Related: The CSS3 Gradient Generator is a very useful tool for creating the CSS code for gradients. Similarly, the CSS3 Gradient Button Generator looks pretty good!.

Instead of going through some of the basic CSS declarations, I’ll list a few of the many CSS3 gradient tutorials that I have found useful. Once I have tried a few more gradients myself, I’ll post some examples.

• One thing that has put me off using gradients is the different CSS gradient syntax between Mozilla (Firefox) and Webkit (Safari, Chrome) browsers but CSS Tricks has a useful article called Speed Up with CSS3 Gradients that describes the differences.
• There’s a clear video tutorial about CSS3 gradients on the NetTuts+ website. If you are unsure about the syntax, this is a good video to start with; it also explains how to use color-stop values for multi-colored gradients.
• Dynamic Drive has some useful linear gradient examples. I’ve changed the Related paragraph (above) to a gradient after reading one of their examples.
• Mozilla has described several gradient examples for Firefox 3.6+ using their -moz- interpretation.
• Andrew Greig provides another concise explanation of how to use gradients.
• Create some nice CSS3 Gradient Buttons with Web Designer Wall. The method here uses a gradient filter for Internet Explorer; it’s not strictly CSS3 but it gives a similar gradient with IE.
• David de Sandro’s stunning Opera logo with CSS uses gradients.

On the subject of browser compatibility, CSS3 gradients are supported by Firefox 3.6+, Safari and Chrome but not Internet Explorer or Opera. You can still use them though; just specify a fallback background color or image for the non-supportive browsers. Remember that websites do not need to look exactly the same in all browsers. I’ve used a gradient recently on Get Emotional for the ‘featured’ item in the right column. Browsers that support CSS3 gradients see the gradient and IE users will just see a solid color which I think is perfectly acceptable.

I hope that the syntax for CSS3 gradients becomes more consistent between supporting browsers (although this won’t be a problem when the official syntax is supported/agreed). The CSS declarations used in the above examples should probably also contain the specification syntax for gradients as well as the -moz- and -webkit- prefixes/syntax. The Mozilla syntax appears to be closest to the specification.

For sure, there will be a lot more CSS3 gradient usage over the next few years and I think it makes sense to get up to speed with this method now.

Stunning CSS3: A Project-Based Guide: Use this book to work through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration.
» Buy from Amazon.com · Amazon.co.uk