Using the CSS radial-gradient() function, it is possible to create ellipse shapes in an HTML page background without using the SVG language.
This function creates background images at transitions between two or more colors radiating from the center.
The radial-gradient() function allows us to set ellipses in the background of an HTML page by using the "background" property in pure CSS.
When creating an ellipse, it is necessary to define the CSS geometric shape "ellipse" in the radial-gradient function.
To create a radial gradient you must define at least two color stops.

example:

background: radial-gradient(ellipse farthest-corner, black , yellow, green, red, lightgray, orange, blue, pink 70%);

result:


The "farthest-corner"is default values ellipse at center.


Examples Ellipse in HTML and CSS Language


<div id="a">
<br>
    <h2>CSS <br> language </h2>
</div>

<style >
#a {
width:500px;
height:150px;
background: radial-gradient(ellipse farthest-corner, blue 60%, red 50%);
}
</style>

result:


CSS
language



JSFiddle



CSS radial-gradient Ellipse in green and yellow colors


<div id="b">
<br>
    <h2>CSS <br> tutorials </h2>
</div>

<style >
#b {
width:500px;
height:150px;
background: radial-gradient(ellipse farthest-corner, green 50%, yellow 50%, green);
}
</style>

result:


CSS
tutorials



JSFiddle





CSS radial-gradient Ellipse with three colors


<div id="c">
<br>
    <h2>CSS <br> language </h2>
</div>

<style >
#c {
width:500px;
height:150px;
background: radial-gradient(ellipse farthest-corner, maroon 50%, yellow 50%, green );
}
</style>

result:


CSS
language



CodePen




CSS repeating radial-gradient Ellipse


<div id="d">
<br>
</div>

<style >
#d {
width:500px;
height:150px;
background:repeating-radial-gradient(yellow , red 10%, green 20%);
}
</style>
result:


CodePen