Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Presets
Name:
hue/saturation reverse import css import image
Stops
Opacity:
Location: %
Color:
Location: %
Preview
Orientation: Size: x IE
CSS
switch to sass
background: -moz-linear-gradient(); /* FF3.6-15 */
background: -webkit-gradient(); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(); /* IE10 preview */
background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */
filter: progid:DXImageTransform.Microsoft.gradient(); /* IE6-9 */
copy
Color format:
Link to, save or share the current gradient using its .

Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Android Browser Chrome for Android
6 - 8
Partial support using filter syntax
Browser usage: 1.33%
 4 - 9
Support using old -webkit- syntax
Browser usage: 0.06%
Select "Maximize compatibility" to support
4 - 5
Support using old -webkit- syntax
Browser usage: 0.1%
Select "Maximize compatibility" to support
3.2 - 4.3
Support using old -webkit- syntax
Browser usage: less than 0.1%
Select "Maximize compatibility" to support
2.1 - 3
Support using old -webkit- syntax
Browser usage: 0.06%
Select "Maximize compatibility" to support
9
Partial support using filter syntax
Full support using SVG (select "IE9 support")
Browser usage: 1%
 3.6 - 15
Support using -moz- prefix
Browser usage: 0.25%
 10 - 25
Support using -webkit- prefix
Browser usage: 0.36%
5.1 - 6
Support using -webkit- prefix
Browser usage: 0.2%
11.1 - 11.5
Support using -o- prefix
Browser usage: 0.01%
Select "Maximize compatibility" to support
5.1 - 6.1
Support using -webkit- prefix
Browser usage: 0.04%
4 - 4.3
Support using -webkit- prefix
Browser usage: 2.06%
10+
Full support (unprefixed)
 12+
Full support (unprefixed)
 16+
Full support (unprefixed)
 26+
Full support (unprefixed)
 6.1+
Full support (unprefixed)
 12+
Full support (unprefixed)
 7.1+
Full support (unprefixed)
 4.4+
Full support (unprefixed)
 46+
Full support (unprefixed)

(?)

Links to CSS gradients documentation: W3C, Firefox, Safari and Chrome (Webkit), Internet Explorer and Opera [2].

What's new

show more... show less...

About

The Ultimate CSS Gradient Editor was created by Alex Sirota (iosart). If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

Important: You'll need a recent version of Firefox, Chrome, Safari, Opera or IE to use this Gradient Generator. The resulting CSS gradients are cross-browser - they will work in these browsers and will also fall back to a simpler gradient in older versions of Internet Explorer.

Features

Help

The main gradient control allows you to:

You can use the 'Stops' panel to conrol the color and the position of the currently selected stop more precisely.

The 'Preview' panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.

Finally, the 'CSS' panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.

Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients