About this tool
What is the CSS Gradient Generator?
Build CSS gradients with a live preview. Pick the type (linear, radial, conic), add unlimited color stops, set the angle (or position for radial), copy the generated CSS. Output supports all modern browsers; for older browsers we include vendor-prefixed fallbacks.
Designers use this for hero backgrounds, button styles, and brand-mood explorations. Output as CSS, Tailwind classes, or SVG.
FAQ · CSS GRADIENT GENERATOR
Questions about the CSS Gradient Generator
Which gradient types are supported?
Linear (most common — angle-based), radial (circular or elliptical, positionable), and conic (the newest type — sweeps colors around a center point, great for pie-chart-like designs). All output as standard CSS.
Can I export as Tailwind?
Yes — alongside the raw CSS, the generator outputs Tailwind utility classes (e.g., `bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500`) when the color stops happen to match Tailwind's named palette.
Free?
Yes — no signup, runs in-browser.