background-image: repeating-radial-gradient( circle at 50% 50%, #ff0000 0%, #0000ff 100% );
👆 Copy CSS Code Manually
Repeating Radial Gradient
is a CSS feature that creates a circular or elliptical color pattern that repeats infinitely across an element's background. Unlike a standard radial gradient that creates a single color transition from a center point outward, a repeating radial gradient tiles the gradient pattern multiple times, creating a continuous, seamless design effect.
Key Characteristics of Repeating Radial Gradients
1. Radial Pattern:
Colors radiate outward from a central point in circular or elliptical shapes.
2. Repetition:
The gradient pattern repeats indefinitely, creating a tessellated effect.
Customizable:
Shape (circle or ellipse)
Position (X/Y coordinates)
Color stops (colors and their positions)
Size (extent of the gradient)
👉 Repeating radial gradients are a powerful tool for creating complex, eye-catching designs with minimal code. They’re widely used in modern web design to replace image-based patterns and enhance visual appeal. 🎨✨