How to change ellipse height in radial gradient in css for background property

Question

When I create a background gradient as follows:

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

I get an ellipse that is inside the div and matches the form of the div. Therefore, if the div is large in height, then the ellipse will be stretched vertically. If the div is a square, then the ellipse will look like a circle. This is great, I want to control the height of the ellipse.

Answer 1

Use a div with overflow set to hidden, and the div inside it is absolutely positioned with a fixed height.

 #outer { height: 100px; overflow: hidden; position: relative; width: 200px; } #inner { background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); bottom: 0; height: 150px; position: absolute; width: 200px; } 

 <div id="outer"> <div id="inner"></div> </div> 

Answer 2

The exact question can be solved by combining the last 2 answers: the gradient of the circle and the background size setting.

Something like that:

 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 that this is less of a hassle than nested divs, and when playing with the background and size values, you can get some pretty interesting effects!

Answer 3

You can play with background sizes and position:

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

demo

Answer 4

You can try circle instead of ellipse :

Demo on dabblet

 .rect2 { width: 600px; height: 100px; line-height: 100px; text-align: center; background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%); }