Gradient Generator
Create beautiful CSS gradients
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
How to use
- Select gradient colors
- Adjust angle and stops
- Copy CSS code
Use cases
- Web design
- Background creation
- UI elements
- Visual effects
About the Gradient Generator
A CSS gradient fills an element with a smooth color transition — the backbone of modern hero sections, button states, and subtle UI depth. This generator builds the CSS string live and exports a matching PNG, so you can hand off the same gradient to developers (as CSS) and designers (as a flat image) in one click.
Features
- Linear + radial gradients
- 0–360° angle with matching canvas PNG output
- Two-color or expandable stops
- Copy CSS background one click
- Download 800×400 PNG that matches the preview exactly
How it works
- Pick two colors and a gradient type (linear or radial).
- Adjust the angle slider for linear gradients.
- See the live preview update.
- Copy the CSS or download a 2x PNG.
Frequently asked questions
Does the PNG match the CSS preview?
+
Yes — we project the CSS angle correctly onto canvas coordinates so 45° in your CSS is 45° in the exported image.
Can I do three or more color stops?
+
Multi-stop gradients are on the roadmap. For now, the tool focuses on clean two-color gradients.
What's a conic gradient?
+
A gradient that sweeps around a center point (like a pie chart). Supported in modern CSS but not yet in this tool — roadmap.
Why isn't my downloaded PNG retina-resolution?
+
We export at 2x (1600×800 effective) via canvas scaling. For ultra-sharp brand assets, use SVG — we're adding SVG export.