Conic gradients, beyond the color wheel.
Every tutorial introduces conic-gradient with a color picker and then quietly walks away. But the function is one of the most underused tools in modern CSS — it can do pie charts, progress rings, holographic foil, vinyl records, candy stripes, sun rays, and a dozen other things, all without a single SVG or canvas tag.
A conic-gradient is a gradient that sweeps around a center point, like the hand of a clock. That's it. That single primitive, combined with repeating-conic-gradient, mask, and animatable custom properties via @property, becomes a Swiss army knife.
Every effect below is pure CSS. No SVG. No canvas. No JavaScript except where animation needs @property. They all degrade gracefully on browsers without @property support — the animated ones become their static frame.
Pie chart, no library
The original use case. Four segments at any angle you want, no D3, no Chart.js.
Animated progress ring
Donut-cut from a conic gradient. @property animates the fill percentage. Mask creates the hole.
Candy stripes (tilted)
repeating-conic-gradient with a tile size — instant 45° stripes. Change the angle for any tilt.
Holographic foil
Pokemon-card iridescence. The trick is saturated rainbow stops at every 60° and a brightness boost.
Vinyl record
Alternating dark conic stripes simulate the grooves. A radial gradient adds the label and center hole.
Sun rays
Alternating colored and transparent slices, with a radial gradient filling the center disc.
Animated glow border
The classic Linear/Vercel "AI button" effect. Outer element is the gradient, inner is the content sitting on top.
Loading spinner
Single-color sweep from transparent to opaque. Masked to a ring. No SVG circles, no border tricks.
Aurora background
Heavy blur + slow rotation + saturated stops = the dreamy gradient background you see on every modern landing page.
The classic color wheel
For completeness. The original example everyone shows. Six color stops, equally spaced.
Pinwheel
Four colored quadrants alternating with transparent slices. Rotate it for hypnosis.
Radial checkerboard
Alternating dark and light slices at 30° each. Useful for transparency indicators, fans, abstract backgrounds.