Click any template to apply
Writing CSS gradients by hand means guessing angle values, hex codes, and stop positions — then flipping between your editor and the browser to check. This free CSS gradient generator removes all of that. Drag color stops on the visual bar, set any angle, switch between linear, radial, and conic types, and see the result update instantly in the live preview.
When you're happy, copy the CSS in any format you need — plain CSS, a SCSS variable, a React inline style object, or a Tailwind class string. No sign-up, no watermarks, no limits.
Switch between three gradient types — directional linear, radial with shape and center position controls, and conic for color wheels.
Drag the slider, click the 8-direction arrow grid, or type an exact degree from 0–360°. Same idea for the conic start angle.
Add unlimited color stops, drag handles on the gradient bar to reposition, or type exact percentages. Active stop highlighting included.
Each stop has its own color picker, hex input, and 0–100% opacity. Opacity automatically becomes a clean rgba() value in the output.
Three preview modes show how the gradient works as a background, clipped to text, or applied to a pill button — switch instantly.
Copy production-ready code in your stack. Tailwind output uses standard utilities when possible and arbitrary values otherwise.
Help other designers discover free tools by sharing your experience on Trustpilot.