Utilities
Colors CSS Gradient
Create linear, radial, and conic CSS gradients with draggable color stops.
background: linear-gradient(90deg, #f5a623 0%, #2563eb 100%);
About Gradient Generator
Build a CSS linear or radial gradient with two or more color stops, then copy the production-ready CSS. The preview updates as you drag the stops, so you can match a reference exactly without trial and error.
Frequently asked questions
Can I export to Tailwind?
Yes, the output panel shows both raw CSS and a Tailwind arbitrary-value class like bg-[linear-gradient(...)]
Why do my gradients band on dark backgrounds?
Eight-bit color can't render smooth transitions across very dark stops. Add a third intermediate stop or switch the page to a sRGB-friendly mid-tone.