All tools · 🎨 Design
🌈 CSS Gradient Generator
Design CSS gradients visually. Linear or radial, with as many color stops as you need. Adjust angle, position, and per-stop opacity. Copy production CSS.
Examples
linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #6366f1 100%)linear-gradient(180deg, #ffffff 0%, #f5f5f4 100%)radial-gradient(circle at center, #fff 0%, transparent 70%)Frequently asked questions
Linear vs radial — when to use which?
Linear is for directional fades (top-to-bottom navbars, button highlights). Radial is for spotlight effects or rounded vignettes. Most UI gradients are linear.
What angles do I use?
0deg is bottom-to-top; 90deg is left-to-right; 180deg is top-to-bottom. Or use to top/to right/etc keywords.
Can gradients be animated?
CSS does not animate the gradient itself smoothly across most browsers, but you can animate background-position on a large gradient for movement effects.
About this tool
CSS Gradient Generator runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🎨 Color Converter — Convert between HEX, RGB, HSL, and HSV color formats. Includes a color picker.
- 🎨 CSS Box Shadow Generator — Visual box-shadow editor with live preview. Copy CSS instantly.
- 🎛️ CSS Filter Generator — Combine blur, brightness, contrast, grayscale, sepia, hue-rotate, drop-shadow.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |