Gradient using CSS3

Posted: May 24, 2012 in CSS
Tags: , , , ,

Now you can use gradient styling using css3. No need of using images from your design’s or layout some thing. You can create gradient styling using css3.

Check the below example for gradient styling using css3

#linearBg2 { 
/* fallback */
 background-color: #1a82f7; 
background: url(images/linear_bg_2.png);
 background-repeat: repeat-x;
 /* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
 /* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
/* Firefox 3.6+ */
 background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
 /* Opera 11.10+ */
 background: -o-linear-gradient(top, #2F2727, #1a82f7);
 }

Try it with different styles for your website.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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