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.
How many colors can a gradient use?
Add as many stops as you need — two is the common case, but three or more lets you build a richer blend. The generator writes the finished CSS with each stop's position, so you can paste it straight into a stylesheet.
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.
- Image Cropper — Crop any photo to an exact area or aspect ratio — no upload.
- Watermark Image — Stamp text over a photo — position, size, opacity and tiling.
Runs entirely in your browser — nothing you enter is uploaded. Last reviewed and updated .