CSS Gradient Generator
Build linear, radial and conic CSS gradients visually. Unlimited stops, configurable angles, copy-ready code.
Last updated: April 2026 · Runs in your browser · No sign-up
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);Gradient syntax cheat sheet
linear-gradient(90deg, #fff, #000)— left to rightradial-gradient(circle at center, #fff, #000)conic-gradient(from 0deg, red, yellow, red)- Multiple stops:
linear-gradient(#fff 0%, #eee 50%, #ccc 100%)
Design tip
For backgrounds, keep gradients subtle (10–20% lightness range). For CTAs, bolder gradients with 2–3 stops can create depth that solid colours can't match.
Frequently Asked Questions
Linear, radial or conic — what's the difference?
Linear: colour transitions along a line. Radial: transitions outward from a point. Conic: transitions around a centre like a pie chart. Each matches different design intents.
How do colour stops work?
Each stop declares a colour and a position (0–100%). Between stops, the browser interpolates. Equal spacing feels balanced; non-linear positions create harder edges for banded effects.
Are gradients performant?
Yes — gradients are rendered by the GPU and are cheap to composite. Stacking many gradients on large elements can affect scroll performance on mobile; test on a mid-range device.
How do I make a subtle gradient?
Use two colours very close in hue with similar lightness. The effect adds texture without drawing attention. Saturation differences between stops often look cleaner than hue shifts.