CSS3 Elliptical Gradient in Chrome
I'm trying to get an elliptical gradient in chrome. I've tried
background-image: -webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))), -webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2));
No luck. I've tried a few other things I've found on the net and in some books and it all just fails or comes out as circles.
Its easy to do through firefox (cool effect for those interested):
background-image: -moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)), -moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2);
Is this possible in chrome? It should be possible according to the planned specs for gradients I've seen. Maybe Chrome just hasn't supported it yet.
**Edit Oh and I've checked, the style is not being overwritten or any such jazz
-moz is a CSS property reserved just for Firefox - that's why it doesn't work in Chrome (and in any other browser).
To be more specific, every CSS property started with
- is not standard and will work just for specific browsers. It's used only for compatibility. If browser doesn't understand what the property means, it just skips it, that's why in CSS files there are multiple properties, and it's the same reason
-webkit will not work everywhere (not only for you).
For CSS3-compatible browsers it should be tone in W3c convention, like
background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
(the colours are different, just note
background: radial-gradient(ellipse ...)
You may use http://www.colorzilla.com/gradient-editor/ or any onther CSS gradient generator for this, just set orientation to radial.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here