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.