Style: Linear Radial

Direction: Center Top Top right Right Bottom right Bottom Bottom left Left Top left


Color Format: Hex Rgb
background: #74e3ec; /* Old Browsers */
background: -webkit-linear-gradient(top,#74e3ec,#c7ffe2); /*Safari 5.1-6*/
background: -o-linear-gradient(top,#74e3ec,#c7ffe2); /*Opera 11.1-12*/
background: -moz-linear-gradient(top,#74e3ec,#c7ffe2); /*Fx 3.6-15*/
background: linear-gradient(to bottom, #74e3ec, #c7ffe2); /*Standard*/

CSS Gradients Browser compatibility

IEEdgeFirefoxChromeSafariOperaiOS SafariOpera

About CSS Gradients

The CSS Gradient generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format.

What is a CSS Gradient?

CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

Definition from W3Schools

You can find more informaiton about CSS gradient at W3Schools, Mozilla Developer Network, W3C, QuirksMode
Compatibility Data from Can I Use. More information about compatibility on Desktop and Network.