CSS Gradient : How to Use

Safari, Chrome, Firefox, Opera, Internet Explorer – all major browser supports CSS Gradients. Internet Explorer doesn’t support all CSS Gradient properties. The features like gradient repeat, gradient angle, and radial gradient are not supported by Internet Explorer. It supports only horizontal and vertical linear gradient with two colors.

Here we will see how to use CSS Gradient in various browsers :-

First we will see for Firefox and Chrome Browser

/* For Firefox 3.6+*/
	background: -moz-linear-gradient(45deg, green , yellow);
/* For Webkit Browsers like Safari, Chrome */
	background: -webkit-linear-gradient(45deg, green , yellow);

For Internet Explorer

As we discussed IE only show linear gradient (no repeat, no angle)

/* For IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='yellow');

Repeat Gradient Background for Firefox and Chrome Browser

/* For Firefox 3.6+*/
	background: -moz-repeating-linear-gradient(45deg,pink,white 10%);
/* For Webkit Browsers like Safari, Chrome */
	background: -webkit-repeating-linear-gradient(45deg,pink,white 10%);

We can use :
Instead of using degree, color name while defining position & Color of gradient as

/* For Firefox 3.6+*/
	background: -moz-linear-gradient(45deg, green , yellow);
/* For Webkit Browsers like Safari, Chrome */
	background: -webkit-linear-gradient(45deg, green , yellow);

we can use left,right, top, bottom, center for position  and
#colorcode (ex. #ffffff – white color)
or
RGBA (ex. rgba(255, 255, 255, 0.5) – white color with transparency of 0.5 – here A in RGBA defines alpha transparency )
as define below

/* For Firefox 3.6+*/
background: -moz-linear-gradient(top right ,#00ff00 , #ffff00);
/* For Webkit Browsers like Safari, Chrome */
background: -webkit-linear-gradient(bottom left,#00ff00 , #ffff00);

One Important note : Always use a fallback method for all type of browsers

/* For Gradient Fail*/
	background:#f5f;

Hope it will help you.
Thanks,
Nikhil Ughade
UI Developer
Pune[MH,India]

Search  tags for “CSS Gradients – how to use”
CSS Gradient background, Gradient text color, nikhil, 0nikhil, designikx, css multi color gradient

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
https://twitter.com/0nikhil

About these ads