
The CSS radial-gradient() function settles a radial gradient as the background image.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape – specifies the shape of the gradient (ellipse (default), circle).
size – specifies the size of the gradient (farthest-corner (default), closest-side, closest-corner, farthest-side).
position – specifies the position of the gradient (center (default)).
start-color, …, last-color – color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
height: 150px;
width: 150px;
background-image: radial-gradient(yellow, orange, green);
}
</style>
</head>
<body>
<div id="gradient-1"></div>
</body>
</html>
Output:
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-2 {
height: 150px;
width: 150px;
background-image: radial-gradient(yellow 10%, orange 15%, green 55%);
}
</style>
</head>
<body>
<div id="gradient-2"></div>
</body>
</html>
Output:
A radial gradient with differently spaced color stops:
Example3:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-3 {
height: 150px;
width: 150px;
background-image: radial-gradient(farthest-side at 60% 55%, yellow 25%, orange 15%, green 55%);
}
</style>
</head>
<body>
<div id="gradient-3"></div>
</body>
</html>
Output:
Enjoy coding!
Read also:
CSS repeating-radial-gradient() Function
CSS linear-gradient() Function