CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
Design linear or radial CSS gradients with multiple color stops, adjust angle and direction, then copy the ready-to-paste CSS.
Common use cases
- Design hero-section background gradients for landing pages
- Create button hover gradients and accent strips
- Build colorful card backgrounds and container fills
- Prototype gradient overlays for hero images and call-to-action banners
Frequently asked questions
Can I export to Tailwind?▾
The output is plain CSS. You can wrap it in a Tailwind arbitrary value: bg-[linear-gradient(...)].
How do I add more color stops?▾
Click on the gradient bar to add a stop, drag stops to reposition, and click an existing stop to change its color or remove it.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.
🎨
Color Converter
Convert HEX, RGB, HSL, HSV, CMYK and LAB instantly with auto-detection.