CSS Gradient Generator

Set the colours and the angle and it writes the CSS linear-gradient for you. Move the colour stops to control where the transition happens, and paste the result straight in.

🎨 Everything runs in your browser. No install, no sign-up.

Start colour

End colour

Add a middle colourRadial, spreading from the centre

Angle135°

Presets

background: linear-gradient(135deg, #8b5cf6, #0ea5e9);

When you put text over a gradient, check the contrast at both the lightest and the darkest point. Tune it for one end only and the text disappears at the other.

What this tool does

Two or three colours with stop positions
Angle or radial
Copy the CSS immediately
Tailwind class guidance

Other colour tools

CSS Box Shadow GeneratorAdjust box-shadow while watching the result Colour Palette GeneratorPull colours that work with a base colour, by rule Colour Shades GeneratorTurn one colour into a 50–900 scale Colour MixerFind the colour between two colours

Colours may look slightly different depending on your screen and its colour profile.