The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.
For Webkit Browsers
The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
For Firefox 3.6+
background: -moz-linear-gradient(top, #ccc, #000);
For Internet Explorer
The following filter wlil only be read by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Cross-Browser CSS Gradient (demo)
Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn't support the feature.
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
Internet Explorer Limitations
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Final Remarks
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
@Serwat sorry its works….
Opera browser was missed,
i use this for all browsers, tested on :
IE 8.0 , FireFox 12.0 , Chrome 18.0 , Opera 12.0
background-color:#55aacc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#55aacc’,endColorstr=’#ffffff’,GradientType=0);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ac), color-stop(100%,#fff));
background: -moz-linear-gradient(top,#5ac,#fff);
background-image: -o-linear-gradient(#5ac,#fff);
Very nice. Any idea on how to do cross background gradients and also use a background image?
I can’t answer to your question, but why don’t you use for example: 2 s
Is there a way to control when the gradient effect begins and where it ends? I want it to make the transfer earlier…
Thanks,
Oren
I tested this:
mozilla-> background: -moz-linear-gradient(50px, #FFF, #000);
result:
the gradient starts at 50th pixel from left to right
1st pixel->#FFF background color ->50th pixel -> gradient to the right end of the element
—————————————————————————————————-
Chrome
background: -webkit-gradient(linear, 0 120, 0 180, from(#F00), to(#000));
result:
linear gradient from top to bottom -> first 120 pixels are #F00, from 121px to 179px is the gradient, then from 180px to the end of the element the color is #000
—-
background: -webkit-gradient(linear, 120 0 , 180 0, from(#F00), to(#000));
result:
same as above, but from left to right
So how would I do a gradient from top to bottom so that the bottom gradient starts at 50% for -moz? If I set -moz-linear-gradient(50%, #FFF, #000); it is from left to right, but I want it to go from top to bottom…
Hi Bianca, in case you’re still looking for a solution, simply inform at what point you want the gradient to start (the XX%):
background: -moz-linear-gradient(top, #cccccc XX%, #ffffff);
i think i found the answer to your question
http://css-tricks.com/examples/CSS3Gradient/
What if I wanted to have two gradients on the same element… Taking the example above, what if I wanted to extend it by having white gradient into black on the top AND bottom? Is this even possible?
/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white 80%, orange);
mizilla 10
/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white 80%, orange);
Felt so hopeless looking for answers to my qusiteons…until now.
background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, #000000),
color-stop(0.74, #00FF00),
color-stop(0.87, #FFFFFF)
);
Really useful; thanks!
How can i use multi gradient in same element. plz give me solution.
As I told to Rich:
background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, #000000),
color-stop(0.74, #00FF00),
color-stop(0.87, #FFFFFF)
);
This is awesome. No more need for a big image editing program!
nice one. still mad at ie flops
hmmm ..Thanks really very useful .. :)
I think the systax for Firefox 10+ has changed, which is bad because all firefox browsers need the the -moz prefix. https://developer.mozilla.org/en/Using_gradients
For anyone interested in a gradient generator that creates the SVG code (required by IE9) for ANY CSS linear or radial gradient, see http://www.visualcsstools.com. There’s a free and a cheap version.
One big thing which is missing is from this article which you can do these days is stacking of multiple image values (aka gradients) in a single background.
For example:
background-image: linear-gradient(left, rgba(0,0,255,0), rgba(0,0,255,1)), linear-gradient(top, #FFF, #000);
If you want to explore the potential of multi-layered gradients check out:
http://glan.github.com/CSS-Patterns-Workbench/#2301441 (use a webkit browser).
and
lea.verou.me/css3patterns/
This doesn’t work quite as expected when applied to the body element:
body {
background: #F00000; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #000000); /* for firefox 3.6+ */
margin:0;
height:100%;
width:100%;
}
In Chrome, I get a gradient down to the end of whatever is filling the body, then it repeats the gradient until the bottom of the window. Is there a way to extend the gradient to the bottom regardless of the content? And also to have it be similar to a background url in a no-repeat fashion so the gradient covers the current window size, and the content of the page can scroll without scrolling the gradient? Currently, I can do this with a some javascript, but it would be nice if it worked with the CSS styles.
Example of issue @ http://tamaratemple.com/cgi-bin/gradient-example.cgi
Same problem for me. It seems fine the first second but when my website are fully loaded the gradient starts to divide. :(
Wonderful tip.
Thanks!
I came across the weirdest effect with this gradient application. when applied IE8 creates kind of a “knockout” effect on my text. in otherword i can see right through my text to the background image.
iam creating flip cards with css3 trasition and animation. and when the card flips there are buttons on the back of the card the buttons have a class applied to it with the gradient. and white text. but the text and border creates the knockout effect in ie8….. any suggestions on what my be causing this?
Thanks for article. I used your filter code for Explorer and I can now see my gradient background in my header. I inserted the filter code into my footer CSS b/c it also uses a gradient background, but some reason it’s not showing up still on Explorer.
Any idea’s?
Awesome!
Sorry guys, but how do i apply the ie code so that the gradient goes from left to right instead of top to bottom. Any help would be greatly appreciated. Thanks.
but this gradient not working on opera browser