Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS3 Repeat Radial Gradients
The CSS repeating-radial-gradient() function creates a radial gradient that repeats in a circular pattern. Unlike regular radial gradients, the pattern repeats continuously from the center outward, creating concentric rings of color transitions.
Syntax
selector {
background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}
Possible Values
| Parameter | Description |
|---|---|
shape |
Optional. circle or ellipse (default) |
size |
Optional. closest-side, farthest-side, closest-corner, farthest-corner
|
position |
Optional. Position of the center (e.g., center, top left) |
color-stop |
Color followed by optional position percentage or length |
Example: Basic Repeating Radial Gradient
The following example creates a repeating radial gradient with three colors −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
height: 200px;
width: 400px;
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
A rectangular box displaying concentric rings that repeat outward from the center, transitioning from blue at the center to yellow at 10% and green at 15%, then repeating this pattern.
Example: Circular Repeating Gradient
This example creates a perfect circular repeating gradient −
<!DOCTYPE html>
<html>
<head>
<style>
.circular-gradient {
height: 300px;
width: 300px;
background: repeating-radial-gradient(circle, #ff6b6b, #4ecdc4 20%, #45b7d1 40%);
border-radius: 50%;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="circular-gradient"></div>
</body>
</html>
A perfect circle with repeating radial rings transitioning from red at the center to teal at 20% and blue at 40%, creating a bullseye-like pattern.
Conclusion
The repeating-radial-gradient() function creates striking visual effects by repeating color transitions in concentric circles. It's perfect for creating patterns, backgrounds, and decorative elements with consistent radial repetition.
Updated on: 2026-03-15T12:03:07+05:30
293 Views
Advertisements