CSS Gradient : How to Use

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

Two Color Gradient

/* 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)

IE Gradient

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

Repeat Gradient Background for Firefox and Chrome Browser

Nikhil

/* 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

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

One Response to CSS Gradient : How to Use

  1. Pingback: CSS Gradient : How to Use Jquery – Use of function – Passing values through function Auto Image Slideshow Using jQuery Sliding Tab Using jQuery | CSS Tips

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 260 other followers

%d bloggers like this: