Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: CSS3 demos: Here

CSS3 Linear Gradients

CSS3 Linear Gradients

Author: Dynamic Drive

With the advent of CSS3's comes support for gradients, specifically, linear and radial gradients. CSS Gradients is supported in FF3.6+, Safari 2+ and Google Chrome. In FF3.6, gradients can currently only be applied to an element's "background-image" or shorthand "background" properties.

The syntax for CSS3 Linear Gradients differs slightly between the Firefox and Safari/Chrome version. They are:

-moz-linear-gradient(<point> || <angle>, color-stops) /*Firefox Linear gradients*/

And:

-webkit-gradient(linear, <point>, color-stops) /*Safari, Chrome Linear gradients*/

Whereby:

The big difference between FF and Safari is that FF uses a "point and angle" system while Safari uses a "point to point" system in applying the gradient.

Color-Stop Explained
A color-stop sets the color in which the gradient's previous color should fade into and at a given point. The point if defined dictates when the color should finally change to the stop color itself. For example, the color-stop value "blue 30%" in Mozilla  or "color-stop(30%, blue)" in Safari means the gradient should fade from the previous color gradually into blue before finally resting at blue itself at the point 30% of the width's container.

Examples are the best way to learn, so lets see a bunch of them now (IE and older browsers will see a gradient image instead):

1) Left to Right Gradient

background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

2) Right to Left Gradient

background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));

3) Top to Bottom Gradient

background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

4) Bottom to Top Gradient

background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));

5) Upper-Left to Lower-Right Gradient

background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

6) Upper-Right to Lower-Left Gradient

background: -moz-linear-gradient(right top 225deg, #00abeb, #fff);
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));

7) Left to Right Stopping Short Gradient

Blue runs from 0 thru 45% of DIV. Remainder is White Gradient.

background: -moz-linear-gradient(left, #00abeb, #fff 45%);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));

8) Upper-Left to Lower-Right Sunshine Gradient

Orange runs from 0 thru 30% of DIV. Yellow from 30% to 40%. Remainder is White Gradient.

background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));

9) Top to Bottom Plateau Gradient.

Fades evenly from Light Blue to Medium Blue to Dark Blue, then Medium Blue and finally Light Blue.

background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));

10) Left to Right Rainbow Gradient

Fades evenly between the 7 colors of the rainbow.

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));

Integrating CSS3 gradients with your existing pages

Just because CSS3 gradients isn't yet widely supported doesn't mean you can't start taking advantage of it now. By first declaring a regular image gradient followed by CSS3 gradients, browsers that don't support CSS gradients will default to the image while those that do will use the more efficient CSS version:

.gradient{
background: url(gradient.gif) top left repeat-y; /*fall back gradient image*/
background: -moz-linear-gradient(left, #00abeb, #fff) ;
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
}

In FF3.6+, Safari and Chrome, the CSS gradients mean 10 less HTTP requests each time this page is loaded in those browsers, translating into faster page rendering for those users. All of the examples above in fact use this technique so all browsers can see a gradient effect.
Code Info

Rate this code:

Date Posted: 03/16/2010

Revision History: None

Usage Terms: Click here

Your Comments (9)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

And for the laziest of us, a quick online CSS3 gradients generator:

http://www.display-inline.fr/projects/css-gradient/

Also provide the fallback image for older browsers
Posted by Display:inline on 03/17, 06:54 AM
Here's a fallback implementation of CSS gradients using Canvas for browsers that don't support it natively: http://weston.ruter.net/projects/css-gradients-via-canvas/
Posted by Weston Ruter on 03/17, 09:34 AM
I'm getting tired of having to use -webkit- and -moz- everytime. My css won't validate! I love the css3 gradient generator. Wish there was a plugin for coda! I prefer moz format, I find it easier to read and comprehend.
Posted by Pixil on 03/17, 06:44 PM
Gradient isn't a part of the CSS3 spec.. It's IE style new tags included by Moz and Chrome..
Posted by Aleksander on 03/23, 05:39 AM
This is finally a great and usefull invention for the css standard, since effects like that has been realized so far with a backround image which contains the desired gradient. The problem with that would be that it is not scalable, which can be solved now, with the new css gradient.
Posted by Option IT on 03/23, 08:08 AM
I will use the "Left to Right Rainbow Gradient" code for flash admin color choose entry. New idea for me. thanks a lot.
Posted by Raju Brahma on 03/29, 04:49 AM
Its a great idea but for cross browser compatibility I think that I will stick to using background images for gradients.
Posted by John Ryan on 04/04, 09:52 AM
Thanks.. Really nice css..
Posted by saboces on 04/05, 12:30 PM
I definitely agree with your point here! I am a fan of the material you post and the quality information you offer in your blog!
resmi kurumlar
araš sorgulama
toplum
Posted by toplum on 04/08, 01:45 PM

Comment Pages 1 of 1 pages


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.