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!

WebKit gradient syntax

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

Linear gradient syntax

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

WebKit linear gradients.


Check out the above Webkit updated syntax:

background-image: -webkit-linear-gradient(#81a8cb, #cde6f9);

Radial gradients

Radial gradient syntax

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


Check out the above Webkit updated syntax:

background-image: -webkit-radial-gradient(#cde6f9, #81a8cb);


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

  • Less complexity
  • No need to search for online CSS3 gradients generators anymore. The syntax is similar across browsers and you can make the translation easier.


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