Get Started Now With Shutterstock
Know more about these products

Gradient Generator

CSS3 gradients let you display smooth transitions between two or more specified colors, instead of image. You can select the starting position in % of each color, by using the slide bar below each of them.

Preview

Saved!

Reseted!
CSS Code to copy
 

Gradient explained

The gradient property allows you to create color gradients without having to use images. This makes the loading of the sites lighter, and allows you to intervene at all times on the definition of the gradient, for example on the mouse over.

It should not be forgotten to add systematically the prefixes of browsers, because some versions still used today, had not yet standardized the gradient property.

Here is the syntax to get a two-color linear gradient:

#MyDiv { background: #FFC38A; background: -moz-linear-gradient(90deg, #FFC38A, #CB77FF); background: -o-linear-gradient(90deg, #FFC38A, #CB77FF); background: linear-gradient(90deg, #FFC38A, #CB77FF);
}

The first line displays a single color in case the gradient does not work on the browser. The linear gradient accepts as parameters an angle, followed by a list of colors separated by commas. There is no limit to the number of colors you can add to the gradient.

It is possible to add a position value for each color by adding the stop parameter, as shown in the example below

#MyDiv { background: -webkit-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: -moz-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: -o-linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%); background: linear-gradient(90deg, #FFC38A 50%, #CB77FF 100%);
}

Browser compatibility :

transform (2D)


36.0
4.0 -webkit-

10.0
9.0 -ms-

16.0
3.5 -moz-

9.0
3.2 -webkit-

23.0
15.0 -webkit-
10.5 -o-
transform (3D)

36.0
12.0 -webkit-

12.0

10.0

9.0
4.0 -webkit-

23.0
15.0 -webkit-

Leave a suggestion