CSS Ellipse without SVG - Examples

HTML CSS JAVASCRIPT JQUERY PHP

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.

<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>

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>

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>

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: