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));

webkit gradient

For Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

firefox gradient

For Internet Explorer

The following filter wlil only be read by IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

ie gradient filter

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

gradient box

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)

css gradient dropdown

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.

342 Comments

1 13 14 15
  1. Patrice
    Aug 10, 2012 @ 4:07 am

    OK thanks

    Reply

  2. security
    Aug 19, 2012 @ 7:51 am

    Very useful! Thank you

    Reply

  3. Rich
    Aug 19, 2012 @ 2:31 pm

    That is awesome. Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that. Perhaps there is a CSS technique by now. And there you were, thanks mate

    Rich

    Reply

  4. Alquiler yates Ibiza
    Aug 20, 2012 @ 3:50 am

    Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that.

    Reply

  5. Sam
    Aug 20, 2012 @ 11:24 am

    This is actually great! I have been searching for this a long time.

    Reply

  6. brian
    Aug 28, 2012 @ 11:23 am

    you forgot about Opera.
    i use this solution
    http://css3please.com/

    Reply

  7. ERVIN
    Aug 29, 2012 @ 8:31 am

    Thanks for the great advice and tutorial! I did find that Opera was left out of the picture and the same gradient effect is achievable via:

    background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* Opera CSS3 */

    Thanks!

    Reply

    • Sanjay
      Oct 8, 2012 @ 6:19 am

      Hiiiiiiii

      Reply

  8. lbt
    Aug 30, 2012 @ 6:18 am

    Thank you, very usefull!

    Reply

  9. himu
    Aug 30, 2012 @ 8:47 am

    Thanks for the post.
    want to know more on this topic.

    Reply

  10. CockpitSeeker
    Aug 31, 2012 @ 5:04 am

    You forgot about IE 8 that uses -ms-filter for god knows what reason…
    Ex: -ms-filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#550000FF, endColorstr=#550000FF

    The weird hex code coulours (with 8 digit instead of 6) is just for transparency…
    I got this at http://stackoverflow.com/questions/2293910/css3-transparency-gradient

    Reply

  11. vagabond
    Sep 14, 2012 @ 10:01 am

    i just want to make it 334 (comments) …and awesome tutorial

    Reply

  12. djanggo
    Sep 21, 2012 @ 1:09 am

    many thanks man, it really help me a lot :)

    Reply

  13. Chloe
    Sep 24, 2012 @ 6:30 pm

    tyty. was just about to revert to using a photoshop gradient image as a background which likely would of looked horrible and taken much more time :s

    Reply

  14. Ivan
    Nov 15, 2012 @ 2:19 pm

    Thanks for this. I got the gradient css for IE to show up, however, it does not validate under the W3C standards.

    Reply

  15. Zainal
    Nov 25, 2012 @ 1:48 pm

    work all browser very nice. thanks

    Reply

  16. OammieR
    Nov 27, 2012 @ 4:59 am

    Thank you so much brother.

    Reply

  17. kombi
    May 29, 2013 @ 2:04 am

    However, in IE, the background won’t stay fixed, extends the length of the body and doesn’t seem to respond to the background-position 0px 100px. Any advice on a workaround would be greatly appreciated.

    Reply

  18. DymoLabels
    Jun 1, 2013 @ 2:39 am

    hello sir
    i really like the CSS site
    thanks for sharing this blog
    thanks

    Reply

1 13 14 15

Leave a Reply