[Solved] Radial Gradient Syntax

[Nikolas]

Hi,

I finally figured out how to get a radial gradient to look the way I wanted it to in webkit browsers:

background: -webkit-radial-gradient(50% 0%, 50% 200px, rgba(255,255,255,.33), transparent);

I had to use a custom shape (50%,200px) rather than “ellipse” or “circle” etc. I can’t figure out how to translate this into the syntax for other browsers – could someone more knowledgeable please help? Here is what I tried, but it does not appear to be working:

background: -moz-radial-gradient(50% 0%, 50% 200px, rgba(255,255,255,.33) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, 50% 0%, 50% 200px, color-stop(0%,rgba(255,255,255,.33)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */

background: -o-radial-gradient(50% 0%, 50% 200px, rgba(255,255,255,.33) 0%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(50% 0%, 50% 200px, rgba(255,255,255,.33) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(50% 0% at top, rgba(255,255,255,.33) 0%,rgba(0,0,0,0) 100%); /* W3C */

Many thanks. Nik

[Paulie_D]

http://www.colorzilla.com/gradient-editor/

[Nikolas]

Thanks Pualie_D, I had already visited that website and given up on it because it did not seem to support custom shapes rather than the default “circle” or “ellipse” – but after reading up on the syntax guides on Wikipedia and the W3C websites I managed to solve the issue with this:

background: radial-gradient(50% 200px ellipse at top, rgba(255,255,255,.33) 0%,rgba(0,0,0,0) 100%);

[Author]

Posts