Introduction to Radial Gradient in CSS
The Radial Gradient is a predefined CSS function. This is defined as to set or add the gradient colors as any background of the image. Gradient color is said to be the facility to add multiple colors at a time. This radial-gradient is starting at a single point and applied even outward of the image. As per CSS default radial-gradient feature the first or initial color starts at the center position of the HTML element and then it faded the color towards the end of the edge corner of the element. Faded off the color distributes equals throughout the image until we specified with some value in the function. We can add multiple colors to the image with a faded feature.
Syntax
img
{
background-image: radial-gradient( shape, size, position, start-color, ..., last-color );//we can as many colors as we want in place of ....
}
Parameters
- Shape: This parameter is used to define the shape of the gradient.
- Possible Values: ellipse (default), circle
- Size: This is used to declare the size of the gradient.
- Possible Values: farthest-corner (default), closest-side, closest-corner, farthest-side
- Position: This is used to declare the position of the gradient.
- Possible Values: Center() Default
- start-color, …, last-color: This is used to provide color value and its stop value (optional)
- Possible values: 0 to 100%, 0 to 100% with color name
Examples to Implement Radial Gradient in CSS
Here are some examples mentioned:
Example #1
Different colors Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
.evenRadGrad {
height: 270px;
width: 620px;
background-image: radial-gradient(green, white, brown); /*GIves you background image with 3 different colors*/
}
.edu { /* provides styles content of inner side image*/
text-align:center;
font-size:48px;
font-weight:bold;
color: navy;
padding-top:81px;
}
.it { /* provides styles content of inner side image*/
font-size:18px;
text-align:center;
font-weight:bold;
color: maroon;
}
.content
{
border: solid 3px brown;
color: green;
font-size: 25px;
}
h1
{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>Introduction of Radial Gradient function in CSS</h1>
<p>The radial gradient is predefined CSS function. This is defined as to set or add the gradient colors as the any background of the image. Gradient color is said to be facility to add multiple colors at a time. This radial-gradient is starting at a single point and applied even outward of the image. As per default radial-gradient feature the first or initial color starts at the center position of the HTML element and then it faded the color towards the end of the edge corner of the element. Faded of the color distributes equals throughout the image until we specified with some value in the function.</p>
</div>
<h1>Radial Gradient with different Colors</h1>
<div class="evenRadGrad">
<div class = "edu">EDUCBA</div>
<div class = "it">Reputed IT Training Platform</div>
</div>
</body>
</html>
Output:
Example #2
Circle shape Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
.evenRadGrad {
height: 400px;
width: 620px;
background-image: radial-gradient(circle,navy, white, skyblue); /*GIves you background image with circle shape and 3 different colors*/
}
.edu { /* provides styles content of inner side image*/
text-align:center;
font-size:48px;
font-weight:bold;
color: fuchsia;
padding-top:81px;
}
.it { /* provides styles content of inner side image*/
font-size:18px;
text-align:center;
font-weight:bold;
color: purple;
}
.content
{
border: double 5px pink;
color: red;
font-size: 25px;
}
h1
{
text-align: center;
color: green;
}
</style>
</head>
<body>
<div class="content">
<h1>Background of Radial Gradient function in CSS</h1>
<p>The radial gradient is predefined function. This is defined as to set or add the gradient colors as the any background of the image. Gradient color is said to be facility to add multiple colors at a time. This is starting at a single point and applied even outward of the image. As per CSS default radial-gradient feature the first or initial color starts at the center position of the HTML element and then it faded the color towards the end of the edge corner of the element. Faded of the color distributes equals throughout the image until we specified with some value in the function.</p>
</div>
<h1>Radial Gradient with Circle Shape</h1>
<div class="evenRadGrad">
<div class = "edu">Java</div>
<div class = "it">Easy to learn and design a project</div>
</div>
</body>
</html>
Output:
Example #3
Different sizes Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
h1
{
color: green;
text-align: center;
}
h2
{
color: brown;
}
.cs {
height: 200px;
width: 200px;
background-image: radial-gradient(closest-side at 60% 55%,pink,brown,white,navy);
}
.fs {
height: 200px;
width: 200px;
background-image: radial-gradient(farthest-side at 60% 55%,pink,brown,white,navy);
}
.cc {
height: 200px;
width: 200px;
background-image: radial-gradient(closest-corner at 60% 55%,pink,brown,white,navy);
}
.fc {
height: 200px;
width: 200px;
background-image: radial-gradient(farthest-corner at 60% 55%,pink,brown,white,navy);
}
</style>
</head>
<body>
<h1>Different Values for Radial-Gardient</h1>
<h2>Closest Side:</strong></h2>
<div class="cs"></div>
<h2>Farthest Side:</h2>
<div class="fs"></div>
<h2>Closest Corner</h2>
<div class="cc"></div>
<h2>Farthest Corner</h2>
<div class="fc"></div>
</body>
</html>
Output:
Conclusion
It is used to apply different colors, shapes to the background image of the HTML element. We can any shape to apply these colors to that element. Inner side deepest point to the outer side highest point color becomes faded.
Recommended Articles
This is a guide to Radial Gradient in CSS. Here we discuss an introduction to Radial Gradient in CSS, syntax, examples with codes and outputs. You can also go through our other related articles to learn more –
4.5 (7,122 ratings)
View Course
