Gradient Generator

Linear, radial, and conic. Linear suits backgrounds and buttons, radial suits spotlights and glows, and conic produces the colour-wheel sweep used in modern brand marks.

Yes — copy it as CSS or as Tailwind classes, so the gradient goes straight into your stylesheet or component without you translating anything by hand.

Add as many as you need and drag each one along the track. Two or three is usually right — more stops make the blend muddy unless the colours are deliberately far apart.

That is what happens when two colours sit opposite each other on the colour wheel and pass through neutral. Move one hue closer to the other, or add a mid stop that keeps saturation up.

The direction of a linear gradient, 0–360°. 180° gives the standard top-to-bottom fade; diagonals feel more dynamic and are the usual choice for hero sections.

Yes — SVG or PNG, alongside the CSS and Tailwind output. Use the image when you need the gradient inside a graphic and the code when it is a page background.

Yes — Sunset, Ocean, Forest, Aurora, Ember, Midnight, Peach, Neon, Berry, Citrus, Sky, Slate, Candy, Emerald, Grape, and Cosmos. Starting from one and shifting the stops is faster than picking two colours cold.