Online CSS Gradient Generator

H: R:
S: G:
B: B:
Degree (0 - 360)
reverse | add gradient | unique link |

Alpha: Location: %
Color: Location: %
CSS - rgba CSS - hex Android Canvas SVG PHP
IE 6-9 only support two color linear gradient
Hex format doesn't support transparent gradient
Android support three color gradient
Canvas    width :  height :
PHP require Image Magic extension, currently support square images

How to create gradient

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.


comments powered by Disqus