What a great article. :o)

A detailed explanation of how it works rather than leaving the lazy dev to copy and paste the code should help us all learn more.

Thanks for writing not only the what’s and the how’s but also the why’s and (importantly) the why not’s.

@24Ways that’s 16 out of 16, you’re on fire!!

I think for now it is still quite complicated to set up this type of gradient, at least more complicated than with a visual editor. But I am sure that this type of editor will quickly emerge to manage the new CSS3 properties, gradients course, but also everything else. Once we have a real visual tool, these properties will be widely used.
Anyway thank you for the explanation in a timely manner because this technique speeds up the loading of a web page.

A question remains though: what about the consumption of resources to draw a CSS3 gradient vs. an image?

Nice work Lea.

One more nice tool that everyone can use alternative of prefix-free is http://prefixr.com/ that’s helps you generate quickly prefixes for all browsers.

Really good and interesting article Lea. I like the way to use CSS3 Gradients to design visual elements, like pattern images for the background and I did something similar at our css3 advent calendar article CSS3 pattern based on linear-gradient

Echo what Stuart says, I feel like I understand it a lot better rather than just using it and expecting it to work.

An article to this standard for each of the more complex CSS3 properties and we would all be a lot more enlightened!

@Stuart, Webstandard-team, Wayne: Thank you so much!

@Nicolas: Of course there is a performance hit when generating any kind of effect in the browser instead of including it as an image, not only with gradients. However, they usually make up for it by making the site download much faster. In my experience, the performance hit starts to be noticeable only when you have A LOT of gradients (e.g. in my patterns gallery) and a bit more easily on mobile.

Always strive to make code that can be modified with the least number of edits.

The patterns stuff is fun and all, but this is definitely the most interesting bit of this article. It Even deserves an article of its own if you ask me, simple as it may sound.

Great lesson and article, and a very useful tool – prefix-free, thank you very much!

@Niels: You’re right, it should. It’s a principle I follow heavily and it’s helped me in many cases that would otherwise be a maintenance nightmare. I’m not sure I can give advice about it though, most of it is different for each case. I’ll try to think about it though and maybe write an article in the future.

@Theo: Thank you!

love the article, but you’re underselling the technique in the opening paragraph:

“This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead.”

css backgrounds scale on high ppi (retina) devices, whereas data uri jpeg/pngs don’t.

developers can make good use of your background patterns, even without understanding how they work. of course it’s better to know how things work and this article helps enormously, but even without, there are benefits to be found.

(aside: i guess an svg image as a data uri would also scale but i’ve yet to find a gallery of those as comprehensive as your pattern page)

Good article, well explained!

I found another neat trick CSS gradients give us. If one of the colours is set to “transparent” then it takes on the colour underneath. So you get a fade between the background colour and the gradient stop colour.

My point though is this: could transparency be used over images? That might give us a way to fade them out at the top of a page, for example.

Food for thought!

This will certainly be useful at overlaying polka dotted pattern over the full-screen stretched background of an image that is not hi-def enough, if that’s possible.

Has any of you tried the patterns in combination with the URI background?