Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Elliptical Gradient in Chrome

CSS3 Elliptical Gradient in Chrome

Problem

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

Problem courtesy of: Poodimizer

Solution

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

Solution courtesy of: Lemurr

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Elliptical Gradient in Chrome

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×