CSS Gradients - Cross-browser Background Gradients Tutorial

September 24, 2011 — This CSS back gradient tutorial will provide you with examples will show you how to implement background CSS gradients so that they are not only compatible with Chrome, Firefox and Safari, but Internet Explorer as well.

The Great Gradient

Gradients have long been used in design to stylize backgrounds and text. When used properly the affect is subtle and gives the design a finished feel. Prior to the introduction of CSS gradients web designers were required to create 1px repeating backgrounds to implement a gradient, but since the introduction of CSS gradients a few years ago and growing browser compatibility designers can use a gradients without having to create an image. Now that we've had our little history lesson about CSS gradients lets get to what you really came here for.

CSS Gradients for Safari and Chrome (webkit browsers)

background:



/*****CHROME / SAFARI LINEAR CSS BACKGROUND GRADIENT ********/

background: -webkit-linear-gradient(120deg, #aaa, #fefefe);



Looking at the above CSS example we see the background gradient parameters are prefixed with "-webkit-linear-gradient". Linear denotes the type of gradient the gradient types for webkit are linear, radial. We will not be covering radial gradient here because they are not cross browser compatible. The next portion of the syntax is the starting point and the angle the gradient will follow. Last but not least we designate our colors to be used in the gradient. 
NOTE: You can add more colora separated by a commas and they will appear in the order you list them.

CSS Gradients for Firefox (Mozilla Browsers)




/*****CHROME / SAFARI LINEAR CSS BACKGROUND GRADIENT ********/

background: -moz-linear-gradient(bottom,  #aaa,  #fefefe);



Opera
background-image: -o-linear-gradient(top,#aaa,#fefefe);
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#fefefe');

Other CSS Gradient Effects

Still want to learn more about CSS background gradients?

Leave a comment for us an we will see what we come up with. Or you can contact us directly through our contact form. Aquim Media is a web design company located in Shenzhen, China. We strive to help the open source community to better all of our tomorrow by working together towards a common goal.

Add a Comment

Comments

Posted Subject Comment
Please be the first to submit a comment.