CSS radial-gradient() Function

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!

Share this: