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

Question

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 this 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.

Answer 1

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.

Answer 2

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

Answer 3

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