Create beautiful CSS gradients
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
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.
Yes — we project the CSS angle correctly onto canvas coordinates so 45° in your CSS is 45° in the exported image.
Multi-stop gradients are on the roadmap. For now, the tool focuses on clean two-color gradients.
A gradient that sweeps around a center point (like a pie chart). Supported in modern CSS but not yet in this tool — roadmap.
We export at 2x (1600×800 effective) via canvas scaling. For ultra-sharp brand assets, use SVG — we're adding SVG export.
