-webkit-linear-gradient not working on chrome

Question

I had below css for mozilla firefox

background: transparent -moz-linear-gradient(center top , #FED066, #FDB73D) repeat scroll 0% 0%;

But when I added below styles for chrome, opera and IE, none of them seems working. What's wrong with the below as it only works with FF and not with other browsers?

background: transparent -webkit-linear-gradient(center top , #FED066, #FDB73D) repeat scroll 0% 0%;
background: transparent -o-linear-gradient(center top , #FED066, #FDB73D) repeat scroll 0% 0%;
background: transparent -linear-gradient(center top , #FED066, #FDB73D) repeat scroll 0% 0%;
background: transparent -ms-linear-gradient(center top , #FED066, #FDB73D) repeat scroll 0% 0%;

I also tried with just -webkit-gradient instead of -webkit-linear-gradient for chrome atleast, but no luck.

Here is a DEMO. If you view in FF it applies gradient background but not on other browsers.

Answer 1

Newer browsers don't implement vendor prefixes to use that features. You just need to use standard declaration too:

center top will not work in chrome browser.

Try this:

background: linear-gradient(to bottom, #FED066 0%, #FDB73D 100%);

I always use the gradient-generator tool to set gradient for cross browser implementation.