Converting -moz-linear-gradient For All Other Supporting Browsers

Here's my rule:

#element {
  background: -moz-linear-gradient(center top, #FFF 8px, #F2F2F2 24px, #F2F2F2 100%) repeat scroll 0 0 #F2F2F2;
}

I want to take that rule and apply it to all of the browsers that support a linear gradient. What would thi开发者_运维知识库s rule's syntax look like for Chrome, Safari, and ... Internet Explorer?

I'm considering making a super simple web app that will take a CSS file with Mozilla rules and kick out the other browser's implementations of the rules as well.

---

Here are the gradients as requested...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);

---

This site do the trick : http://www.colorzilla.com/gradient-editor/

Choose "Import from css" from the "CSS" zone and paste your code !!!

You can try with something like "background: -moz-linear-gradient(center top, rgb(216,54,33), rgb(112,5,7));" for exemple.

Be carefull : code must be formated a certain way... if there is space after comma (", ") for exemple this do not work...

---

It's not too hard... But this website (css-tricks.com) can explain it much better than I can.

---

What you're looking for is already available here: CSS3 Gradient Generator - that works for Mozilla and Webkit-based (Safari/Chrome) browsers.

As for IE, MSDN should help you.

---

I usually use something along the lines of

// Firefox
background: -moz-linear-gradient
// Chrome & Safari
background: -webkit-gradient
background: -webkit-linear-gradient
// Opera
background: -o-linear-gradient
// IE
background: -ms-linear-gradient

It's probably as crossbrowser solution as you're going to get - but then again CSS is not my forte.