Adding cool gradients to your web site

I found this cool site where you can use an online tool to generate the CSS for cross browser gradients. Unfortunately it doesn’t work for Internet Explorer 8, so I need to figure that out. I did find this other site that showed the CSS code below but that did not seem to work either.

/* 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);
  }

4 thoughts on “Adding cool gradients to your web site”

Spotted this on Jake’s twitter feed yesterday and quickly gave it a try. Unfortunately, the BlackBerry 9630 does not render the gradient either. I thought it was supposed to support most of webkit outside of JS DOM manipulation… CSS apparently is a little light as well, at least with v5.0.0.484… which is a shame as it would really provide a cheap way to liven up light-weight, low bandwidth web apps.

LikeLike

Reply ↓

Edit: Oops – I actually tried THIS ONE:

http://www.colorzilla.com/gradient-editor/

LikeLike

Reply ↓

This one works a bit better for IE (even 6) and at least will provide a monochrome block in the BlackBerry browser.

http://www.colorzilla.com/gradient-editor/

LikeLike

Reply ↓