CSS Gradient Background – Cross Browser!


You read that right. This works in:

  • Firefox >=3.6
  • MSIE >=5.5 (!)
  • Safari >=4
  • Chrome

Oh Em Gee, I’ve got a CSS-applied Gradient.

How neat is this?

I mean really, this is super cool.

And it degrades gracefully in older browsers and Opera.

My boss Mike passed this little CSS gem to me, and now dear reader I pass it to you. It was orignally developed by FakeDarren, who posted a great little CSS button example. I find it useful for those times when designers get all fancy with gradiented backgrounds.

I’ve condensed Darren’s CSS down to these four lines plus comments, which will give you the lovely Green-to-Black CSS gradient background you can see above.

  .gradientV{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
  }

And as you may have guessed by the ‘V’ in the class name, you can also do horizontal gradients – here are some more examples for left-right gradients, and we see what happens when we apply animations to a gradiented DIV.

Horizontal Gradient CSS:

  .gradientH{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(left, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, right top, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#00FF00', EndColorStr='#000000', GradientType=1);
  }

So now we no longer need little 1px slices in the background-image property, just remember to make sure all the colors in each line of CSS match up, and that you choose a nice flat colour fallback that works with your content.

I’m very impressed with how slim the CSS needs to be to get this great image-free cross-browser CSS background gradient. Just saying those words gives me shivers. Yay for CSS!

One other thing that this allows, which was never possible using css background images, is stretchable gradients. Not only can the content be allowed to expand ‘naturally’ via site updates etc, but we can actually animate gradiented DIVs and preserve the effect!

As in:

Oh boy, when you click on this, you’d better be sitting down.


Related Posts:

, , , , , , ,

  1. #1 by Trung on April 6, 2010 - 4:17 am

    Nifty & Fast!

    • #2 by Howard Yeend on April 6, 2010 - 3:18 pm

      Cheers :0)

      • #3 by Dirck Hecking on December 21, 2010 - 3:22 pm

        Very cool stuff …

  2. #4 by Daniella on May 6, 2010 - 12:18 am

    WOW! this should be twitted for eternity. best technique ever. Thanks!

  3. #6 by schmaart on May 27, 2010 - 5:13 pm

    Examples above don’t seem to work in FF3.5.9
    Safari 4.0.5 is as expected.

    Specifics:

    Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9

    Safari Version 4.0.5 (4531.22.7)

  4. #7 by ramon on June 4, 2010 - 3:18 am

    It seems that the fallback for opera doesn’t work on opera 9.10 under linux. Does anyone have a solution?

  5. #8 by Andrew on June 9, 2010 - 12:19 pm

    MSIE >=5.5? This does not work in IE <= 7.

  6. #10 by rob on June 15, 2010 - 3:18 pm

    Thanks for sharing – can you gradient fade on opacity? I.e. a fade from 70% transparent to clear?

    • #11 by Howard Yeend on June 16, 2010 - 12:28 am

      interesting question. I can’t think of a way of doing that. It would be very awesome to see though, so if you find a way let me know!

    • #12 by Juho on September 27, 2010 - 3:38 am

      Background gradient fade with opacity works at least in FF3.6 using CSS rgba function.

    • #13 by Dot on October 18, 2011 - 10:28 am

      Yes, I’ve tried it under Fx 7 (but Juho tested it in 3.6), Chrome, IE 9, 8 and 7, but as far as I know it should work in IE including even 5.5. Just use rgba( r, g, b, alpha ) for chrome/safari and fx in place of #00FF00 and #FF00FF00 and #00000000 in IE filter. Unfortunately, IE needs some additional hack for background-color: transparent (it applies filter on top of “opera” background color). Example (not working in Opera, but in all other browsers:
      /* Mozilla: */
      background: -moz-linear-gradient(top, #00FF00, rgba( 0, 0, 0, 0 ));
      /* Chrome, Safari:*/
      background: -webkit-gradient(linear,
      left top, left bottom, from(#00FF00), to( rgba( 0, 0, 0, 0 ) ));
      /* MSIE */
      filter: progid:DXImageTransform.Microsoft.Gradient(
      StartColorStr=’#FF00FF00′, EndColorStr=’#00000000′, GradientType=0);

      • #14 by Dot on October 18, 2011 - 10:33 am

        Update: It should be possible in Opera as well now, I missed BS-Harou’s post about Opera supporting gradients. Unfortunately, while Opera gives much more possibilities, it’s totally different implementation than included in this post, so it needs further testing.

  7. #15 by Arty2 on July 26, 2010 - 12:26 am

    changing it to background-color would fix it for opera it seems

  8. #16 by Shane on August 8, 2010 - 7:19 pm

    How do I actually apply this to a website? I’m still new to CSS. I cut and pasted the code in my style.css file but it isn’t working. I know there is something else I am supposed to do, but what? Could you look at my code if it’s not a bother?

    • #17 by Moog on March 9, 2011 - 6:29 am

      Yes, you need to link the element (DIV, for example) to the CSS code. Like this:

      My CSS Demo

      .color{
      background:#000000;
      color:#FFFFFF
      }

      DIV contents here

      You’ll notice that the “.” before the CSS class “color” means “class”. You have to tell the DIV which class it is linked to, i.e.

      Hope this helps
      Moog.

  9. #18 by LowZo on August 9, 2010 - 9:53 am

    You guys have a top blog. Keep up the good work.

  10. #19 by Aaron S on August 15, 2010 - 5:36 pm

    When this filter is applied in IE, text smoothing is disabled (tested in IE8), which is not so nice for users with text smoothing enabled as it’s a very obvious difference in text rendering, the best option here may be to have a fallback background image for browsers other than Firefox, Chrome, and Safari. This would be done by specifying the background image as the background property as the fallback in the example above.

  11. #20 by Bill on November 19, 2010 - 4:31 pm

    I am using it now on the website http://www.calspaservice.com and everything does as you promised…very cool but there is that thing with font smoothing and IE8. Anyone with and idea that could be slipped into the css?

  12. #21 by Franko on November 19, 2010 - 9:12 pm

    Nice tutorial on css gradients!

  13. #22 by newb on November 25, 2010 - 11:54 pm

    too good!!
    very clean….

  14. #23 by jeterboy on December 4, 2010 - 6:18 am

    cool bro, you rock! I love it.

  15. #24 by FrankyBoy on December 10, 2010 - 7:10 am

    erm, seriously, vendor specific prefixes are NOT css3.

  16. #26 by blau on December 15, 2010 - 6:03 pm

    Unfortunately the IE gradient technique makes any font inside that div look jagged and crappy. Any work arounds?

  17. #27 by Dan Miser on January 8, 2011 - 9:22 pm

    Brilliant! Thank you.

  18. #28 by cyber-zenith on January 19, 2011 - 4:14 am

    I’m very impressed about this & cyber-zenith

  19. #29 by nikl on January 25, 2011 - 9:19 am

    One http request less – never knew this was possible with pure css, thank you!

  20. #30 by mno on February 16, 2011 - 7:29 pm

    Question about the font rendering in IE8 — if one applies the background gradient to an element behind the element with text in it, is the font rendering better? For example, I have a little page with all the content in various divs with absolute position. I applied the gradient background CSS to the body itself for grins. It looks great to my untrained eye–but I am quite the novice at this!

  21. #31 by Mallesh on March 1, 2011 - 5:02 am

    Thanks a lot

  22. #32 by BS-Harou on March 21, 2011 - 4:25 am

    Hi,
    you should update your article because Opera 11.10 finally supports css3 gradients :)

    More info: http://dev.opera.com/articles/view/css3-linear-gradients/

  23. #33 by Robert on April 10, 2011 - 4:04 am

    This is a great post. I have been trying to figure this out for the longest time. Thank you for posting it.

  24. #34 by dessy on July 7, 2011 - 3:42 am

    wow!!! amazing!!

  25. #35 by Sajjad on July 7, 2011 - 12:43 pm

    Not working in ie8, Any solution

  26. #36 by ofidz on July 25, 2011 - 1:23 pm

    Perfect.. Very good stuff here.
    Thanks for sharing this tutorial.

  27. #37 by Miguel on July 29, 2011 - 2:02 pm

    Very very nice.
    Thanks for sharing.

  28. #38 by Miguel on July 29, 2011 - 2:49 pm

    I could only get it to work 100% in IE 6 & 7 if I added the property “zoom:1″. It’s the least invasive way I found to do it, it has to do with the hasLayout property in IE, just another one of IE’s rendering bugs… I tried setting height, overflow and so on but then you’d loose the fluid stretchable beauty of this solution.
    Again, very very nice.

  29. #39 by Phuong on October 2, 2011 - 1:10 pm

    wonderful
    Thanks a lot

  30. #40 by Poole Web Design on November 21, 2011 - 4:34 pm

    Hi, here’s the cross browser way of doing the gradient in browsers other than IE:

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666), to(#333333));background: -webkit-linear-gradient(#666, #333333);background: -moz-linear-gradient(#666, #333333);background: -ms-linear-gradient(#666, #333333);background: -o-linear-gradient(#666, #333333);background: linear-gradient(#666, #333333);

    Paul

  31. #41 by Aart on December 23, 2011 - 9:28 pm

    If you don’t want it to repeat, just use the no-repeat attribute:
    /* fallback (Opera) */
    background: #ffffff;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #2364FF, #ffffff) no-repeat;
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
    left top, left bottom, from(#2364FF), to(#ffffff)) no-repeat;
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=’#2364FF’, EndColorStr=’#ffffff’, GradientType=0) no-repeat;

  32. #42 by trueanice on December 26, 2011 - 7:23 pm

    Thanks a million

  33. #43 by Ardy on January 24, 2012 - 9:04 pm

    Thanks a lot.. you rock!

  34. #44 by Ramiya on February 6, 2012 - 7:31 am

    very useful ! thank you so much

  35. #45 by Chris on February 8, 2012 - 2:19 pm

    Unfortunately, to get the gradient working in IE, even with the filter, the div must have at least a height or width attribute defined. There may be other work arounds for this but I found this worked for me.

  36. #46 by Brent Tilley on February 14, 2012 - 4:24 pm

    The only issue with this is that it’s not a W3C standard. In other words, your website will fail validation.

  37. #47 by Alex on March 6, 2012 - 2:44 pm

    thx, works great ;D

  38. #48 by Marty Glaubitz on March 24, 2012 - 10:53 pm

    i had to specify zoom:1; in the end to get it work on IE

  39. #49 by Ax-master on April 3, 2012 - 7:11 am

    I tried the code, put it on the body and it works fine not until I used a div with a position that is set to absolute.

    #footer {
    width:100%;
    bottom:0 !important;
    position:absolute !important;
    }

    If any of you encountered this, I would like to know how did you resolve it.

    Thanks

  40. #50 by Vibhor Agarwal on June 25, 2012 - 12:54 pm

    this helped me alot.. thanks !!!

  41. #51 by Lovely on August 17, 2012 - 6:06 am

    Awesome!

Comments are closed.