Developers would know that CSS gradients are pretty useful and powerful at the same time. However, taking one look at the code of a CSS3 gradient can make it seem like a daunting task even to seasoned programmers. This is the precise reason why many enterprising developers have ventured into the territory of CSS3 WebKit gradient generators. Please keep in mind that the CSS3 WebKit gradient generator is normally meant to be viewed inside a WebKit browser only. You can’t get a live sampling of the tool in the absence of a WebKit browser.

The CSS3 WebKit gradient generator has two main goals: the first one is providing a nice showcase that can exhibit the actual power of the CSS gradients, and second is providing a GUI (graphical user Interface) wherein a user gets the ability of visually creating a gradient code that can be used in his/her CSS wherever he/she may like. To achieve this end, developers have tried creating a user interface which appears quite familiar to programmers, having a look similar to that of graphic editing tools such as Adobe Photoshop. In addition, color swatches are provided for creation of the gradient as well as a slider for determining the position of colors inside the gradient.

The color swatch control
After selecting a particular color swatch, the user can pick the colors he/she needs from the color picker on the page, and make appropriate adjustments to the colors. This color picker is made available by the color picker jQuery plugin (from the

The gradient direction control
Apart from the color swatch control, the users can also benefit from the gradient direction control in order to set the appropriate direction for the gradient. Using this control, programmers can make quick and easy use of the keywords like top, bottom, right, left for positioning of their gradients, or even use their own custom point locations.

Live sample
The CSS3 WebKit gradient generator can even provide live sampling of the changes made to the controls detailed above. Hence, you can get to see the color sample as well as the CSS code output as and when you make any changes, in real time. Please note that this live sampling of gradient colors can only be used from inside a WebKit browser.