CSS Gradient Generator
Create beautiful gradients visually. Copy CSS, Tailwind, or export as PNG.
Color Stops
deg
Stop Colors
%
%
%
Preset Gradients
background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 50%, rgba(245, 158, 11, 1) 100%); background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 50%, rgba(245, 158, 11, 1) 100%); background: -moz-linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 50%, rgba(245, 158, 11, 1) 100%);
Pro Features
$3.99- Export as SVG
- Animated gradient CSS
- Gradient mesh (4-corner blend)
One-time payment • Lifetime access
Text Preview
Check readability against your gradient.
Small text for contrast testing.