Conic gradient

Angular gradients for color wheels and pie charts — pure CSS.

Color wheel

Pie chart

Widely Supported

colorno-js

Quick implementation

/* Color wheel */
.color-wheel {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: conic-gradient(in oklch,
    oklch(0.7 0.2 0),
    oklch(0.7 0.2 60),
    oklch(0.7 0.2 120),
    oklch(0.7 0.2 180),
    oklch(0.7 0.2 240),
    oklch(0.7 0.2 300),
    oklch(0.7 0.2 360)
  );
}

/* Pie chart with hard stops */
.pie-chart {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: conic-gradient(
    oklch(0.65 0.2 265) 0% 45%,
    oklch(0.72 0.2 145) 45% 72%,
    oklch(0.78 0.18 85) 72% 90%,
    oklch(0.5 0.03 260) 90% 100%
  );
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building data visualizations.

Goal: Create a color wheel and a simple pie chart using only CSS conic-gradient — no SVG or canvas.

Technical constraints:
- Use conic-gradient() with oklch() colors.
- For the color wheel, vary the hue from 0 to 360 at constant lightness and chroma.
- For the pie chart, use hard color stops (same position for end and start) to create sharp segment boundaries.
- Apply border-radius: 50% to make the element circular.
- Use "in oklch" interpolation for smooth hue transitions.

Edge cases:
- The first and last color stops in a color wheel must match (hue 0 and hue 360) to avoid a seam.
- Pie chart percentages must sum to 100% to avoid gaps.
- Add an accessible alternative (table or description) when using pie charts for real data.

Why this matters in 2026

Before conic-gradient(), pie charts required SVG, canvas, or JavaScript charting libraries. Now you can create them with a single CSS property. The color wheel demonstrates how oklch() produces perceptually uniform hue rotations — every segment of the wheel looks equally vivid because lightness and chroma stay constant while only the hue changes.

The logic

conic-gradient() draws colors sweeping around a center point, like a clock hand. For smooth transitions (color wheel), you list colors at even intervals and let the browser interpolate. For hard segments (pie chart), you use the same percentage for both the end of one color and the start of the next — oklch(...) 0% 45%, oklch(...) 45% 72% — creating a sharp boundary at 45%.

Accessibility & performance

CSS pie charts are not accessible by default — screen readers can't interpret a gradient. If the chart conveys real data, provide an alternative: a data table, aria-label with the values, or a visually hidden summary. Performance is excellent — gradients are GPU-rendered and require no layout or JavaScript computation. Ideal for lightweight dashboards and decorative elements.