Gradient Generator
Build CSS linear and radial gradients with as many colour stops as you like, an adjustable angle and a live preview. Copy the ready-to-use background value. Private and in-browser.
CSS gradients
A gradient blends between colour stops, each placed at a percentage from start to end.
A linear gradient runs along an angle (0° points up, 90° points right);
a radial gradient spreads outward from the centre. Add as many stops as you like and
copy the ready-to-use background value.
The CSS is built in your browser; nothing is uploaded.
What this does
A gradient generator builds CSS linear and radial gradients with multiple colour stops, an adjustable angle and a live preview.
How to use it
- Choose linear or radial.
- Add colour stops and set positions.
- Adjust the angle (linear).
- Copy the CSS background value.
How it works
For a linear gradient the angle sets the direction, 0° points up, 90° points right; radial gradients spread from the centre. Each stop has a colour and a position from 0% to 100%.
Example
A two-stop linear gradient at 90° fades left-to-right from the first colour to the second.
Sources & methodology
Last updated .
Frequently asked questions
What does the angle control?
For a linear gradient the angle sets its direction, 0° points up and 90° points to the right. Radial gradients spread outward from the centre, so they have no angle.
How many colour stops can I add?
As many as you need. Each stop has a colour and a position from 0% to 100%, and you can remove any down to the last two.
Is the CSS ready to paste?
Yes. Copy the full background declaration and drop it straight into your stylesheet.
Related tools
Color Converter
Convert a colour between HEX, RGB and HSL. Type any format or pick from the swatch and copy the others instantly, with a live preview. Fast and private, all in your browser.
Contrast Checker
Check the contrast ratio between a text and background colour against WCAG AA and AAA levels, with a live preview and instant pass/fail for normal and large text. Runs in your browser.
Color Palette Generator
Build harmonious colour palettes from any base colour using complementary, analogous, triadic, tetradic or monochromatic harmony. Each swatch shows a readable hex code, copy in your browser.
JSON Formatter
Pretty-print, validate and minify JSON, with selectable indentation and optional recursive key sorting. Syntax errors are pinpointed by line and column. Fast and private, all in your browser.