repeating-conic-gradient()

Syntax

repeating-conic-gradient([from angle] [at position,] color-stop [, color-stop]+)

Parameters

Examples

background: repeating-conic-gradient(
  #3b82f6 0deg 10deg,
  transparent 10deg 20deg
);

background: repeating-conic-gradient(
  #e5e7eb 0% 25%,
  white 0% 50%
) 50% / 40px 40px;

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

Use arbitrary values: bg-[repeating-conic-gradient(...)]

Related Functions

• linear-gradient()— The linear-gradient() function creates a gradient image transitioning between colors along a straight line.
• radial-gradient()— The radial-gradient() function creates a gradient image radiating from a center point outward in an elliptical or circular shape.
• conic-gradient()— The conic-gradient() function creates a gradient that sweeps around a center point, useful for pie charts and color wheels.
• repeating-linear-gradient()— The repeating-linear-gradient() function creates a repeating linear gradient pattern, tiling the color stops indefinitely.
• repeating-radial-gradient()— The repeating-radial-gradient() function creates a repeating radial gradient pattern, producing concentric rings or ellipses.
• opacity()— The opacity() filter function applies transparency to an element's rendering, affecting both content and background.

Frequently Asked Questions