How is conic different from linear/radial?

Linear interpolates along a straight line; radial along a circle outward from a point; conic interpolates around a circle (like a clock face). Conic is what you reach for when the gradient should sweep around an axis — pie/donut charts, color wheels, checkered patterns, loading spinners.

Why two stops at the same position?

It creates a hard edge instead of a smooth transition. `red 0% 25%, blue 25% 50%` means 'red from 0 to 25%, then immediately blue from 25 to 50%' — perfect for pie chart segments or sharp checkerboard patterns. Without overlap, you'd get a smooth blend.

Conic Gradient Generator

Color

CSS conic gradients are still underused, partly because they're hard to author by hand. This builder gives you a live preview of the gradient applied to ellipse, square, rectangle, or pie shapes, with sliders for the `from` angle and `at` center position. Add or remove color stops, drag positions, and pick colors with the system color picker. Five presets — rainbow, sunset, monochrome, checkerboard, and a 3-segment ring chart — get you started. Output is plain CSS you can drop into any stylesheet; works in all modern browsers (Chromium 69+, Firefox 83+, Safari 12.1+).

—

From angle: 0°

Center X: 50%Center Y: 50%

Preview shape

Preset:

Color stops

0.0%

25.0%

50.0%

75.0%

100.0%

CSS

background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);

Works in all modern browsers (Chromium 69+, Firefox 83+, Safari 12.1+). All values are degrees and percent.

How to use

Pick a preset or start from the default rainbow. The preview updates as you tweak.
Slide the `from` angle to rotate the whole gradient. Move the center sliders to off-center the conic apex.
Add stops where you want hard transitions (two stops at the same position make a sharp edge — useful for pie charts).

Frequently asked questions

How is conic different from linear/radial?: Linear interpolates along a straight line; radial along a circle outward from a point; conic interpolates around a circle (like a clock face). Conic is what you reach for when the gradient should sweep around an axis — pie/donut charts, color wheels, checkered patterns, loading spinners.
Why two stops at the same position?: It creates a hard edge instead of a smooth transition. `red 0% 25%, blue 25% 50%` means 'red from 0 to 25%, then immediately blue from 25 to 50%' — perfect for pie chart segments or sharp checkerboard patterns. Without overlap, you'd get a smooth blend.