Design Tools
CSS Gradient Generator
Create linear, radial, and conic gradients with live preview. One-click CSS, Tailwind, and React style export.
%
%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Cleaner gradients in seconds
Pick your gradient type, drop in colors, drag stops, copy CSS. Three modes (linear, radial, conic) cover 99% of use cases. Output works in any modern browser (Chrome 79+, Safari 13+, Firefox 74+) and integrates with React inline styles, Tailwind, and CSS files.
Frequently Asked Questions
What's the difference between linear, radial, and conic gradients?▾
Linear: colors blend along a straight line at any angle (most common). Radial: colors radiate from a center point outward (like a sun). Conic: colors sweep around a center point in a circle (good for pie charts, color wheels, modern UI accents).
How many color stops can I add?▾
As many as you need. Most production designs use 2-3 stops for clean blends. 4+ stops can create rainbow effects or atmospheric backgrounds. Each stop has a position (0-100%) — drag the position slider to control where each color sits.
Is it accessible to use gradient text?▾
Be careful. CSS `background-clip: text` makes text hard to read against busy backgrounds and breaks for users with color vision deficiency. For body text, never use gradient. For large headlines (40px+), gradient on solid backgrounds is OK if you maintain 4.5:1 contrast against the lightest stop.
How do I add this to Tailwind?▾
Tailwind 4 has built-in gradient utilities like `bg-linear-to-r from-blue-500 to-purple-600`. For custom gradients, use the "Tailwind config" output below — it generates a `bg-gradient-...` class you can drop in.
Why does my gradient look banded?▾
GPU rendering of gradients sometimes shows visible bands ("Mach banding"). Fixes: (1) add intermediate color stops at 25/50/75% with computed midpoint colors, (2) add subtle noise (0.5% opacity overlay), (3) accept it — most users don't notice.