CSS Conic Gradient Builder

How to use

1. Tune the start angle and center position via sliders.
2. Add color stops to place colors.
3. Pick a shape (circle / square / rectangle).
4. Copy the CSS into your project.
5. Or start from a preset for a quick base.

Key features

• Start angle 0–360° + freely positioned center
• Add/remove stops, tune each color and angle
• 4 presets (pie / clock / rainbow / loader)
• Circle, square, rectangle outputs
• Live preview + CSS code sync

Use cases

• Pie / donut charts — pure CSS, no Chart.js
• Clock dials — 12-hour analog clock design
• Progress rings — 100% donut progress
• Angular hover — rotating background interaction
• Rainbow / color wheels — designer color wheels

What is conic-gradient?

Conic gradient rotates colors around a center along an angle. The third type after linear-gradient and radial-gradient, standardized in CSS Image Module Level 4. Supported in Chrome 69+, Safari 12.1+, Firefox 83+. Lets you build rotational graphics like pie charts and clocks with pure CSS — no JS or SVG. from {angle} sets the start, at {x} {y} sets center.

FAQ