CSS Gradient Generator
Build a linear or radial gradient visually with as many colour stops as you need, and copy the CSS when it looks right.
How to use the CSS Gradient Generator
- Choose linear or radial.
- Set your colour stops and the angle or position.
- Copy the generated CSS into your stylesheet.
About the CSS Gradient Generator
Gradients read better when the two colours are close in hue; distant hues pass through a muddy midpoint, which is why some gradients look cheap. Adjusting the angle changes the mood considerably — near-vertical feels calm, diagonal feels active. Preview at full width before committing, since a gradient that looks good in a small swatch can band noticeably across a large hero section.
Frequently asked questions
How do I create a CSS gradient?
Use linear-gradient() or radial-gradient() as a background image value, with an angle followed by two or more colour stops.
Can I add more than two colours?
Yes, add as many stops as you like and position each one along the gradient.
Why does my gradient look banded?
Large areas with a small colour range show banding. Widen the colour difference slightly or add a subtle noise overlay.
Related free tools
- Signature Maker — Draw or type a signature — transparent PNG for documents.
- Passport Photo Maker — Crop any photo to official passport / visa size — 300 DPI.
- Image to Text (OCR) — Extract text from photos & screenshots — 8 languages.
- Video to GIF — Turn any short video clip into a shareable GIF.
- AI Image Generator — Create an image from a text description — free, no account.
- Image Compressor — Shrink JPG/PNG/WebP file size — 100% in your browser.