CSS Gradient — Generator, Maker, and Background

» Don't generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using "Maximize compatibility" mode)
» Browser Compatibility panel showing supported browser versions, usage stats, etc.
» Support for radial and diagonal linear gradients
» Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG
» Support for Sass SCSS format using Compass mixins (needs latest beta of Compass)
» Copy to clipboard button for quickly grabbing the generated code
» Easy resizing of preview panel by dragging its corner

The Ultimate CSS Gradient Editor was created by Alex Sirota. 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.

Powerful Photoshop-like interface
Cross browser CSS output
Horizontal, vertical, diagonal and radial gradients
Complex multi-stop gradients
Opacity support with multiple opacity stops
Hex, rgb, rgba, hsl, hsla color formats
Support for full multi-stop gradients with IE9
Import from image (convert image gradient to CSS)
Import from existing CSS
Adjust gradient by hue, saturation, lightness
More than 135 gradient presets
Saving custom gradient presets
Sass output
Flexible preview panel
Gradient permalinks for sending and sharing

Online CSS Gradient Generator
Gradient is combination of two or more colors where transitions between colors are smooth. These gradient is useful for background, banners and buttons.

There are 6 types of gradient orientation:
linear, radial, elliptical, repeating linear, repeating radial and repeating elliptical.

In this tool you can create linear and radial gradient code for CSS, SVG, canvas, PHP and Android. In addition for CSS code you can also generate ellipital and repeating orientation from other tool page refer below. In middle left side of the tool there is a gradient bar, this gradient bar is responsible for generate gradient pattern. Above and below are alpha stopper and color stopper. You need to drag stopper to generate different patterns. Delete stopper by drag to up or down direction. Add new stopper by click at place of draggable area.

You can save current setting and use later by clicking 'unique link'. Export data to other tool page for latest browser support and image generator.

Post a Comment

Post a Comment (0)

Previous Post Next Post