This is a quick 6-minute tutorial from my old Pro Web Design Course. You can’t buy the course any more (I’m replacing it with a new, better one), but I’m going to post some of the videos that are still helpful.

New CSS3 properties, including gradients, can replace a lot of instances where web designers would once have used an image file.

These new options can make our websites, themes, and apps a lot faster to load, by reducing the number of assets downloaded, and also more flexible, letting us change properties from a central CSS file instead of multiple images.

Note, because this is quite an old video, the version of Photoshop is CS1 (Windows). But the principles and approach will be the same for later versions of Photoshop.

Here’s a very good, up-to-date tutorial on CSS3 gradients

About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally. In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at

Leave a comment:

Notify me of followup comments via e-mail. You can also subscribe without commenting.