Question

I’m trying to make shiny buttons in browsers that support gradients, but never got the look I wanted in Firefox. The image shows what they look like in chrome/safari (which is what I’m after), but I couldn’t figure out how to get the distinct reflection line in Firefox (3.5+ of course).

http://karmatics.com/stuff/shiny.png http://karmatics.com/stuff/shinycss3button.html

Below is the webkit code (for the gradient), I’d like to match the look exactly in Firefox. For the rest of the CSS (including my poor attempt at doing it in Mozilla, which isn’t lickably glossy enough for my taste), view source on the page.

(BTW, I’d be thrilled if someone wanted to make it look good in IE too, but not holding my breath 🙂 )

edit: mozilla answer is in there now (also at link above)

<style>
div.shiny {
 background-image:
    -webkit-gradient(
        linear, 0% 0%, 0% 100%,
        from(rgba(255,255,255,0.5)),
        to(rgba(255,255,255,0.2)),
        color-stop(.5,rgba(255,255,255,0.3)),
        color-stop(.5,rgba(255,255,255,0.0))
        );
 background-image:
   -moz-linear-gradient (top, 
     rgba(255,255,255,0.5), 
     rgba(255,255,255,0.3) 50%, 
     rgba(0,0,0,0.0) 50%, 
     rgba(255,255,255,0.2));
  }
</style>

Answer 1

For Firefox use

background: -moz-linear-gradient(90deg, red, white, blue);

or

background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);

you can add as many colors as you want to get the right look. https://developer.mozilla.org/en/CSS/-moz-linear-gradient

For IE use the filter property

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

Check working example at http://jsfiddle.net/gkyg3/1/