CSS radial-gradient

To create a radial gradient you must provide at least two color stops. You want to create more complex gradient effects you can define more color stops.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
 height: 150px;
 width: 200px;
 background-color: red; /* For browsers that do not support gradients */
 background-image: radial-gradient(#ffff1a, #ff9900, #ff66cc);
}
</style>
</head>
<body>

<h1>Radial Gradient - Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

OUTPUT:

Repeating a radial-gradient:

repeating-radial-gradient() function is used to repeat radial gradients.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
 height: 150px;
 width: 200px;
 background-color: red; /* For browsers that do not support gradients */
 background-image: repeating-radial-gradient(#ffff1a, #ff9900 10%, #ff66cc 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>

OUTPUT: