CSS Gradient Generator
Design linear, radial and conic gradients with draggable colour stops, see a live preview, and copy plain CSS or a Tailwind class
Colour stops
2 of 10. Click the bar to add one, drag to move, arrow keys nudge.- %
- %
Drag-and-drop stops
Click the bar to add a colour stop, drag it to move, up to 10 stops with transparency
Linear, radial and conic
Angle, shape, size and centre controls, plus a repeating toggle for stripes and rings
CSS and Tailwind output
Copy a background declaration or a Tailwind v4 class in HEX, RGBA or HSLA
Frequently asked questions
How do I make a hard edge between two colours?
Give two neighbouring stops the same position. The gradient has no room to blend between them, so the colour changes abruptly at that point. Combine this with the Repeating toggle to make stripes.
How do I use the result in Tailwind CSS?
Copy the Tailwind output and use it as a class, for example on a div. It is a Tailwind v4 arbitrary value, with each space in the gradient replaced by an underscore because class names cannot contain spaces.
What colour formats can I type into a stop?
Anything CSS understands: hex (3, 4, 6 or 8 digits), rgb(), hsl(), and colour names like tomato. If what you typed is not a valid colour, the stop keeps its last good colour and the field is marked invalid.
Is anything uploaded?
No. The gradient is built and previewed in your browser, and nothing is sent to a server.