CSS Gradient Generator
Visual CSS gradient generator with multi-color, Tailwind support and real-time preview.
Preview
Click bar to add color, drag handles to move
Settings
Color Stops
CSS Code
background: linear-gradient(90deg, rgb(255, 81, 47) 0%, rgb(221, 36, 118) 100%);Tailwind: bg-[linear-gradient(90deg,_rgb(255,_81,_47)_0%,_rgb(221,_36,_118)_100%)]
About This Tool
A powerful CSS gradient generator for creating beautiful backgrounds. Features an intuitive visual editor for Linear, Radial, and Conic gradients. Precisely control color stops, angles, and center positions. Supports radial shapes (Circle/Ellipse) and size constraints. Generates both standard CSS and Tailwind CSS arbitrary value syntax for seamless project integration.
Features
- 🎨 Multi-mode: Supports Linear, Radial, and Conic gradients
- 🎯 Precise Control: Adjust center position, radial shape, and size
- 🌈 Multi-stop: Unlimited color stops with position and opacity control
- 📦 Tailwind Ready: Generates Tailwind CSS arbitrary value syntax
- ⚡ Real-time: Instant visual feedback for every parameter change
- 💻 Code Gen: Auto-generates standard CSS and repeating gradient code