The radial-gradient() function is an inbuilt function in CSS that is used to set a radial gradient as the background image. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified.
Syntax:
background-image: radial-gradient( shape size at position, start-color, ..., last-color );
Parameters: This function accepts many parameters which are listed below:
- shape: This parameter is used to define the shape of the gradient. It has two possible value circles or ellipse. The default shape value is an ellipse.
- size: This parameter is used to define the size of the gradient. The possible value are: farthest-corner (default), closest-side, closest-corner, farthest-side.
- position: This parameter is used to define the position of the gradient. The default value is the center.
- start-color, …, last-color: This parameter is used to hold the color value followed by its optional stop position.
The below example illustrates the radial-gradient() function in CSS:
Example:
html
<!DOCTYPE html><html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 250px;
width: 600px;
background-color: white;
background-image:
radial-gradient(#090, #fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">
GeeksforGeeks
</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
|
Output:
Example 2:
html
<!DOCTYPE html><html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 400px;
width: 600px;
background-color: white;
background-image:
radial-gradient(circle, green, white, blue);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 155px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">
GeeksforGeeks
</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome 26
- Edge 12
- Firefox 16
- Opera 12.1
- Safari 7