Free CSS Gradient Generator
Design CSS gradients visually: pick two (or more via presets) colors, set a linear angle or choose a radial circle/ellipse, and watch the live preview update instantly. The generator outputs clean CSS — background: linear-gradient(135deg, #667eea, #764ba2); — ready to paste into any stylesheet.
Linear vs radial gradients
A linear gradient blends colors along a straight line at your chosen angle (0–360°; 90deg is bottom-to-top, 135deg is a popular diagonal). A radial gradient emanates from the center outward — circle keeps uniform proportions, ellipse stretches to the element's shape. Both support multiple stops and transparency when you use hex+alpha colors.
Gradient FAQ
Can I use more than two colors? Yes — reason about extra stops as comma-separated values; this generator is the quick two-stop builder, and its presets show popular multi-tone combos. Does the preview look the same in production? Yes — the CSS is standard and runs identically in every modern browser. Is my design sent anywhere? No — everything happens locally in your browser.
Learn gradients in depth
New to gradients? Our CSS gradients explained guide covers the full syntax — angles, color stops, hard edges, repeating gradients, and copy-paste examples.