If you want to create an attractive background, you can do so with the help of a CSS function called radial-gradient.
The radial-gradient is an in-built CSS function which generates smooth transitions between two or more colors. It sets the radial gradient as the background image. The radial-gradient creates a radial effect. It can be a circular or elliptical shape.
It saves bandwidth usage and helps reduce download time. In radial-gradient, the color emerges from a single point and then spreads outwards. Its center point and ending shape define a radial-gradient, and two or more color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Let's discuss its arguments.
- position: It defines the gradient position. Its default value is center. It can be specified in units (such as px, em, etc.) or keywords (like bottom, left, etc.).
- shape: It defines the shape of the gradient, which can either be circular or elliptical. If its value is not specified, then it sets to its default value, i.e., ellipse.
- size: It defines the gradient size. It can be either a length value (for example, 60px, 2em, 45%, etc.) or it can be the following possible values:
- farthest-corner
- farthest-side
- closest-corner
- closest-side
Its initial value is the corner that is farthest away.
- [located at]: This is an elective element that specifies the central point of the gradient. By default, it is set as It can be indicated using measurements (e.g., 45px, 5em, 25%, etc.) or descriptors (e.g., bottom, left, etc.).
- [start-color, …, last-color]: This section contains a series of color stops that establish both the colors used and their respective positions within the gradient. Each color stop comprises a color code followed by an optional stop point.
Examples of CSS Radial-Gradient Function
Let's explore the radial-gradient function through visual examples.
Example 1:
In this instance, we will employ the radial-gradient function to establish an HTML element's circular radial gradient background.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-1 of the CSS radial-gradient() function</title>
<style>
#main {
background-image: radial-gradient(black, yellow, green, blue);
}
.hello {
text-align:center;
font-size:24px;;
color:white;
font-weight:bold;
padding:100px;
}
</style>
</head>
<body>
<h1> Example-1 of CSS radial-gradient() function to create elliptical radial gradient</h1>
<div id="main">
<div class = "hello">Elliptical radial gradient</div>
</div>
</body>
</html>
Output:
As demonstrated in the following output, the background image of the HTML elements is configured with elliptical and circular radial-gradient.
Example 2:
In this instance, we are going to establish the form of the radial gradient for an HTML element.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-2 of the CSS radial-gradient() function</title>
<style>
#main {
height: 400px;
width: 600px;
background-image: radial-gradient(circle, violet, indigo, blue, green, yellow, orange, red);
}
.hello {
text-align: center;
font-size: 40px;
color: white;
font-weight: bold;
padding-top: 130px;
}
.div2 {
font-size: 35px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Example-2 of CSS radial-gradient() function where we are applying a circular radial gradient</h1>
<div id="main">
<div class="hello">Hello World</div>
<div class="div2">Welcome to the C# Tutorial</div>
</div>
</body>
</html>
Output:
In the displayed result, the backdrop image is configured with a circular radial gradient.
Example 3:
In this instance, we are going to establish the radial gradient size of the HTML components to the outermost edge.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-3 of the CSS radial-gradient() function</title>
<style>
.size {
font-size: 18px;
text-align: center;
font-family:'Times New Roman', serif;
}
.far-side {
height: 150px;
width: 150px;
display: inline-flex;
margin: 10px;
}
#left-bottom {
background-image: radial-gradient(farthest-side at left bottom, blueviolet, crimson, burlywood, gold);
}
#right-bottom {
background-image: radial-gradient(farthest-side at right bottom, blueviolet, crimson, burlywood, gold);
}
#left-top {
background-image: radial-gradient(farthest-side at left top, blueviolet, crimson, burlywood, gold);
}
#right-top {
background-image: radial-gradient(farthest-side at right top, blueviolet, crimson, burlywood, gold);
}
</style>
</head>
<body>
<h1>Example-3 of the CSS radial-gradient() function in which we are setting the size of the radial gradient to the farthest side </h1>
<div class="far-side" id="left-bottom">
<div class = "size">farthest-side at left bottom</div>
</div>
<div class="far-side" id="right-bottom">
<div class = "size">farthest-side at right bottom</div>
</div>
<div class="far-side" id="left-top">
<div class = "size">farthest-side at left top</div>
</div>
<div class="far-side" id="right-top">
<div class = "size">farthest-side at right top</div>
</div>
</body>
</html>
Output:
Example 4:
In this instance, we are going to establish the radial gradient size of the HTML elements to extend to the utmost corner.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-4 of the CSS radial-gradient() function</title>
<style>
.size {
font-size: 18px;
text-align: center;
font-family:'Times New Roman', serif;
}
.far-corner {
height: 150px;
width: 150px;
display: inline-flex;
margin: 10px;
}
#left-bottom {
background-image: radial-gradient(farthest-corner at left bottom, blueviolet, crimson, burlywood, gold);
}
#right-bottom {
background-image: radial-gradient(farthest-corner at right bottom, blueviolet, crimson, burlywood, gold);
}
#left-top {
background-image: radial-gradient(farthest-corner at left top, blueviolet, crimson, burlywood, gold);
}
#right-top {
background-image: radial-gradient(farthest-corner at right top, blueviolet, crimson, burlywood, gold);
}
</style>
</head>
<body>
<h1>Example-4 of the CSS radial-gradient() function in which we are setting the size of the radial gradient to the farthest corner </h1>
<div class="far-corner" id="left-bottom">
<div class = "size">farthest-corner at left bottom</div>
</div>
<div class="far-corner" id="right-bottom">
<div class = "size">farthest-corner at right bottom</div>
</div>
<div class="far-corner" id="left-top">
<div class = "size">farthest-corner at left top</div>
</div>
<div class="far-corner" id="right-top">
<div class = "size">farthest-corner at right top</div>
</div>
</body>
</html>
Output:
Example 5:
In this instance, we are going to adjust the radial gradient size of the HTML elements to the nearest edge.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-5 of the CSS radial-gradient() function</title>
<style>
.size {
font-size: 18px;
text-align: center;
font-family:'Times New Roman', serif;
}
.closest-side {
height: 250px;
width: 250px;
display: inline-flex;
margin: 20px;
}
#side1 {
background-image: radial-gradient(closest-side at 50px 50px, blueviolet, crimson, burlywood, gold);
}
#side2 {
background-image: radial-gradient(closest-side at 200px 150px, blueviolet, crimson, burlywood, gold);
}
</style>
</head>
<body>
<h1>Example-5 of the CSS radial-gradient() function in which we are setting the size of the radial gradient to the closest side </h1>
<div class="closest-side" id="side1">
<div class = "size">closest-side at 50px 50px</div>
</div>
<div class="closest-side" id="side2">
<div class = "size">closest-side at 200px 150px</div>
</div>
</body>
</html>
Output:
Example 6:
In this instance, we are going to adjust the radial gradient size of the HTML elements to the nearest corner.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-6 of the CSS radial-gradient() function</title>
<style>
.size {
font-size: 18px;
text-align: center;
font-family:'Times New Roman', serif;
}
.closest-corner {
height: 250px;
width: 250px;
display: inline-flex;
margin: 20px;
}
#corner1 {
background-image: radial-gradient(closest-corner at 150px 150px, blueviolet, crimson, burlywood, gold);
}
#corner2 {
background-image: radial-gradient(closest-corner at 50px 75px, blueviolet, crimson, burlywood, gold);
}
</style>
</head>
<body>
<h1>Example-6 of the CSS radial-gradient() function in which we are setting the size of the radial gradient to the closest-corner</h1>
<div class="closest-corner" id="corner1">
<div class = "size">closest-corner at 100px 100px</div>
</div>
<div class="closest-corner" id="corner2">
<div class = "size">closest-corner at 50px 75px</div>
</div>
</body>
</html>
Output:
Example 7:
In this instance, we'll establish the size of the radial gradient of the HTML components to the most distant side, utmost corner, nearest side, and nearest corner.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example-7 of the CSS radial-gradient() function</title>
<style>
.main {
height: 200px;
width: 200px;
display: inline-block;
margin: 10px;
}
.size {
text-align: center;
font-size: 20px;
color: black;
font-weight: bold;
}
#main1 {
background-image: radial-gradient(farthest-side at left bottom, red, yellow, cyan );
}
#main2 {
background-image: radial-gradient(farthest-corner at right bottom,blue, yellow,green);
}
#main3 {
background-image: radial-gradient(closest-side, red, yellow, lightgreen);
}
#main4 {
background-image: radial-gradient(closest-corner, blue, yellow, green);
}
</style>
</head>
<body>
<h1>Example-7 of the CSS radial-gradient() function that shows farthest-side, farthest-corner, closest-side, and closest-corner</h1>
<div class="main" id="main1">
<div class="size">farthest-side at left bottom</div>
</div>
<div class="main" id="main2">
<div class="size">farthest-corner at right bottom</div>
</div> <br>
<div class="main" id="main3">
<div class="size">closest-side</div>
</div>
<div class="main" id="main4">
<div class="size">closest-corner</div>
</div>
</body>
</html>
Output:
Browsers Support:
- Mozilla Firefox
- Microsoft Edge
- Google Chrome
- Safari
- Opera
Conclusion
In this guide, you've grasped the CSS radial-gradient function along with illustrative instances that can be applied to elevate the background of an HTML component.