Gradient Generator
Build CSS linear and radial gradients with as many color 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 color 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 center. 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 color stops, an adjustable angle and a live preview.
How to use it
- Choose linear or radial.
- Add color 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 center. Each stop has a color and a position from 0% to 100%.
Example
A two-stop linear gradient at 90° fades left-to-right from the first color to the second.
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 center, so they have no angle.
How many color stops can I add?
As many as you need. Each stop has a color 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 color 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 color 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 color palettes from any base color 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.