Developer·Updated 2026-04-22
CSS Gradient Generator
Build linear, radial and conic gradients. Up to 6 color stops.
CSS Gradient Generator
How it works
- 1.
Pick type
Pick a preset (16:9 video, 9:16 reel, 1:1 post, 4:5 portrait, 1.91:1 Open Graph) or enter your own starting dimensions.
- 2.
Edit stops
Enter a new width or height. The other dimension is computed proportionally. GCD simplifies the ratio to the cleanest form (for example 1920×1080 = 16:9).
- 3.
Copy CSS
Perfect for video export, social media assets, responsive images, or CSS aspect-ratio properties. One click copies width, height, or the ratio string.
FAQ
Which browsers support conic-gradient?+
All modern browsers since 2020. For IE11 fall back to linear-gradient.
Does this support Tailwind?+
Yes, for linear gradients an arbitrary-value Tailwind class is emitted.
How many color stops are allowed?+
2 to 6.