csssassgradientradial-gradients

radial-gradient CSS origin on the top, not in the center


I'm playing around with radial gradients and I cannot get to have the effect I wish.

I'm tried using the colorzilla gradient generator but they center the gradient always in the middle. I've tried by my own transform it but I do not know if there is an option to change the origin of the gradient. I would like the origin to be in the middle horizontally but at the top vertically.

I've tried the following with no success:

background: -webkit-radial-gradient(center, ellipse cover at 50% 0px, $center 0%,$outer 70%);
background: -webkit-radial-gradient(top center, ellipse cover, $center 0%,$outer 70%);

Below is the effect I'm trying to emulate:

enter image description here


Solution

  • Thank to Harry I found the answer. If this helps anybody here is what I used to get this gradient effect, it seems to work on all browsers except IE9 of course...

    background: -webkit-gradient(radial, 50%, 0, color-stop(0%,#ffffff), color-stop(70%,#b7b7b7));