CSS gradients, made simple
A short guide to linear and radial gradients — how the angle and colour stops work, and how to build one with the generator.
Open the CSS Gradient Generator →What this tool does
The CSS Gradient Generator lets you build a linear or radial gradient by picking colours and positions, set the angle, preview it live, and copy the ready-to-use CSS. It all runs in your browser.
How gradients work
A gradient blends two or more colours. With
linear-gradient(90deg, #6366f1 0%, #ec4899 100%) the colours fade along a line:
90deg points the line to the right, and each stop says where a
colour sits (0% at the start, 100% at the end). Add more stops for richer blends.
A radial-gradient(circle, …) instead blends outward from the centre, which is
handy for glows and spotlights. The angle doesn't apply to radial gradients.
How to use it
- Open the Gradient Generator.
- Choose linear or radial, and set the angle for linear.
- Pick colours and drag each stop's position; add or remove stops as needed.
- Try a preset or hit Randomise for inspiration.
- Copy the CSS and paste it into your stylesheet's
background.
Tips
- Two colours close in hue give a subtle, professional fade; opposite hues pop.
- Use a gradient on
background, or on text withbackground-clip: text. - Keep contrast in mind if you'll place text over the gradient.
Nothing is uploaded
The gradient and its CSS are produced locally in your browser — nothing is sent anywhere.
FAQ
How does a CSS linear-gradient work?
It blends colours along a line; the angle sets direction and each stop's percentage sets position.
What is the difference between linear and radial gradients?
Linear blends along a line; radial blends outward from a centre point.
Is anything uploaded?
No — it all runs in your browser.
Ready to try it? Open the CSS Gradient Generator →