Updated · Free · No sign-up · Runs in your browser
Gradient Lab builds linear, radial and conic CSS gradients visually. Drag colour stops, set the angle, start from a preset or randomise, and copy ready-to-paste CSS with one click. The preview updates live, so you can see exactly what your background will look like.
How to use Gradient Lab
Choose linear, radial or conic.
Drag and add colour stops, and set the angle or position.
Copy the CSS and paste it into your stylesheet.
Frequently asked questions
Which CSS gradient types can I build in Gradient Lab?
Gradient Lab supports linear-gradient, radial-gradient, and conic-gradient syntax with unlimited editable color stops.
How do I add or adjust gradient stops?
Drag handles directly along the gradient bar to reposition stops, click the bar or stop controls to add stops, and pick custom HEX colors for each point.