Conic gradient pattern. Rainbow ยท hologram ยท disco ยท dial.
๐ŸŒ€ Preview

How to use

  1. Set section count (2โ€“24) and rotation.
  2. Pick up to 4 colors.
  3. Choose mode (smooth / hard / rainbow).
  4. Optional center hole for donut shape.
  5. Copy CSS or download PNG.

Key features

  • Up to 24 sections, 4-color smooth or 7-color rainbow
  • 3 modes (smooth / hard / rainbow)
  • 5 presets (4-color / rainbow / dartboard / hologram / sunrays)
  • Center hole for donut effect
  • CSS conic-gradient + PNG export

Use cases

  • Hologram cards โ€” smooth 4-color interpolation
  • Loading spinners โ€” rotating animation backgrounds
  • Dashboard donut charts
  • Retro disco โ€” 4โ€“6 sections, hard colors
  • Web headers โ€” dynamic impression

What is conic-gradient?

CSS conic-gradient (supported in all modern browsers since 2021) creates circular gradients that rotate as colors change. After linear and radial, it's the third gradient type โ€” letting you write rainbow, dial, hologram effects in one CSS line, which previously required PNG/SVG.

FAQ

Browser support?

Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Universal in 2026.

Donut chart?

Set center hole to 60โ€“70% for donut. Or use `mask: radial-gradient(transparent 50%, black 50%)`.

SVG export?

SVG conic-gradient support is weak. PNG is the most reliable; use the CSS directly on the web.

Free?

Yes.