CODEWITHSUNDEEP
google-chromecss
Poodimizer
Poodimizer

Reputation: 621

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

Upvotes: 1

Views: 792

Answers (1)

Lemur
Lemur

Reputation: 2665

-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 -moz and -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.

Upvotes: 1

Related Questions