A while ago, I wrote another article here about the CSS3 gradients. At that time, you saw the browser support, the advantages of using them and their syntax.

So, what’s new since then?
The CSS3 Webkit syntax, which was quite different than Mozilla at that time, has been updated!

Latest news

About a week ago, the WebKit dev team announced they were updating the CSS3 gradient support in the rendering engine.

The most important point of their announcement was the that they will bring the CSS3 Webkit syntax in line with Mozilla’s implementation. Pretty cool huh? Now, you will have less headache pain when you’ll use both rendering engines (Webkit and Gecko) gradients.

What about the old syntax?

Now, beside the old old -webkit-gradient value, nightly WebKit builds include support for -webkit-linear-gradient and -webkit-radial-gradient.

No need to worry about the old syntax, it will still be supported.

We’ll maintain support for -webkit-gradient for the foreseeable future for all the existing content out there that uses it.

Webkit team assurances

Linear gradients

background-image: -moz-linear-gradient(#81a8cb, #cde6f9); /* Firefox */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Webkit */

Mozilla, Chrome and Safari CSS3 linear gradients.

Now

background-image: -moz-linear-gradient(#81a8cb, #cde6f9); /* Firefox */
background-image: -webkit-linear-gradient(#81a8cb, #cde6f9); /* Webkit */

Check out the above Webkit updated syntax

Radial gradients

background-image: -moz-radial-gradient(#cde6f9, #81a8cb); /* Firefox */
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,400, from(#cde6f9), to(#81a8cb)); /* Webkit */

Mozilla, Chrome and Safari CSS3 radial gradients.

Now

background-image: -moz-radial-gradient(#cde6f9, #81a8cb); /* Firefox */
background-image: -webkit-radial-gradient(#cde6f9, #81a8cb);  /* Webkit */

Check out the above Webkit updated syntax

Pros

This syntax update has just pros, no cons! Why’s that?

• Less complexity
• No need to search for online CSS3 gradients generators anymore. Both syntax are similar now and you can make the translation easier.

Conclusion

Still not using CSS3 gradients for your website? What are you waiting for?