Online Gradient Generator

The following Gradient Generator is used to Generate the gradient color, you can generate multi combination color and you have options to change the directions and shape, Finally generate the code and paste it to your web page.

      The following Gradient Generator is used to Generate the gradient color, you can generate multi combination color and you have options to change the directions and shape, Finally generate the code and paste it to your web page.

reverse colors

Opacity

Location

%

Delete Selected Stop

Color

Color

Location

%

Delete Selected Stop

Hue

Saturation

Lightness

Reset

horizontal orientation vertical orientation diagonal orientation diagonal orientation radial orientation

CSS SASS

knob

background: rgba(248,80,50,1);

background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));

background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );

Color format hex hsl hsla rgb rgba

Comments

knob

IE9 support

knob

Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient,
and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->


Enter existing gradient CSS to import.
Use Mozilla, Webkit, Opera, W3C or IE format.

ACCEPT CANCEL