Why a gradient generator
Hand-writing gradients in CSS is tedious because the result lives entirely in your imagination until you reload the browser. A live preview cuts the iteration time from “type, save, reload, eh, undo” to “drag the slider until it looks right.”
This tool stays opinionated and small: linear, radial, conic. No skewed text overlays, no weird mesh effects. Just the three primitives every UI uses, tuned so you can ship the result.
Linear, radial, conic — when to use each
- Linear is the workhorse. Headers, cards, hero backgrounds, button states. Most UIs use linear gradients exclusively.
- Radial creates depth and focus. Use it for spotlights, vignette effects, attention-grabbing CTAs.
- Conic is unique — it sweeps around a center point. Use it for color wheels, ring charts, decorative accents.
Use cases
- Hero backgrounds: pair the brand accent with a darker variant for depth.
- Card states: subtle gradients differentiate active/hovered cards from idle ones.
- Empty states: a soft radial gradient draws the eye toward an action.
- Loading shimmer: a moving linear gradient produces the classic skeleton-loading effect.