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: