how to change height of ellipse in radial gradient in css for background property

Question

When i create background gradient like this:

background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);

I get ellipse that is inside the div, and conform to shape of div. So if div is large in height then ellipse would be stretched vertically. If div is a square then ellipse would be like a circle. That's fine, i want to control height of ellipse.

Answer 1

The exact question can be addressed by combining the last 2 answers: circle gradient and adjusting the background size.

Something like this:

div {
    width: 300px;
    height: 100px;
    background: radial-gradient(circle, white 0%, red 50%, black 100%);
    background-size: 100% 200%;
    background-position: 0% 50%;
}

<div></div>

I find it less of a hassle than nested divs, and by playing with the background-position and size values, you can get some pretty cool effects!