CSS gradient generator with live preview
Pick two colours and an angle and get copy-paste CSS for a linear or radial gradient, with a live preview. It generates in your browser (0 uploads, works offline).
How to use it
- Enter your input above.
- The result and a live preview appear on your device.
- Copy or Download it.
FAQ
How do I generate a CSS gradient for free?
Choose the type, angle and two colours, and the CSS background property appears instantly with a live preview in your browser — no upload. Copy the one line straight into your stylesheet.
What's the difference between linear and radial?
A linear gradient blends along a straight line at the angle you set; a radial one blends outward from the centre in a circle. The preview updates as you switch so you can see which suits the element.
Is anything uploaded?
No. The CSS is generated locally and nothing is stored; it works offline.
Can I use any colour format?
Yes — hex, rgb() or named colours all work in the colour fields.
Limits
Two colour stops. Multi-stop and conic gradients are a future addition.
Related
The colour converter changes formats; the shadow generator and palette generator are other CSS helpers.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.