CSS Gradient Generator
Design linear and radial CSS gradients with live preview. Create CSS gradients visually — linear or radial, any angle, multiple colour stops — and copy the ready-to-use CSS code. Free online gradient generator.
About the CSS Gradient Generator
Gradients give interfaces depth without a single image download, but writing gradient syntax blind is guesswork. This generator lets you set two or more colour stops, switch between linear and radial, dial in the angle, and watch the preview update live — then hands you the exact CSS to copy, with cross-browser -webkit- fallback included. Randomise for inspiration or fine-tune each stop position by hand.
How to use the CSS Gradient Generator
- Pick your start and end colours.
- Choose linear or radial, then set the angle.
- Add or adjust colour stops as needed.
- Copy the generated CSS into your stylesheet.
Key features
- Linear and radial gradients
- Unlimited colour stops with adjustable positions
- Angle control for linear gradients
- Copy-ready CSS with vendor fallback
What is a colour stop?
Do gradients work in all browsers?
Related Image & Design tools
More utilities from the same category.
Image Compressor
Shrink JPG, PNG and WebP files with a quality slider — locally.
Image Resizer
Resize photos to exact pixels with aspect-ratio lock.
Image Converter
Convert between PNG, JPG and WebP in your browser.
Image to Base64
Turn images into data URIs for CSS, HTML and JSON.
Favicon Generator
Create favicon sets from any image — all standard sizes.
Color Converter
Convert colours between HEX, RGB, HSL — with shades palette.