enure » post

CSS3 Gradients in Webkit (Safari, Konqueror or Chrome)

Example 1: Gradient with 4 stops

 
background-image: 
          -webkit-gradient(
            linear,
            left top, right top,
            color-stop(0, #66D2E1), 
            color-stop(0.4, #7FE386),
            color-stop(0.6, #C9D74E),
            color-stop(0.9, #9FEB70)
          );

Example 2: Two Gradients

 

This creates the same gradient as shown in figure 5 without the use of from and to.

background-image: 
          -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #00abeb),
            color-stop(0.5, #fff),
            color-stop(0.5, #66cc00),
            color-stop(1, #fff));

More info

* * *

search

Or, see a list of articles