CSS Gradient Generator
Create beautiful CSS gradients visually. Linear, radial, conic — copy CSS or Tailwind code.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
bg-gradient-to-r from-[#667eea] to-[#764ba2]
background: #667eea; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Frequently Asked Questions
What types of gradients can I create?▼
Linear gradients (with custom angle), radial gradients (circle), and conic gradients. All with unlimited color stops.
Can I get Tailwind CSS code?▼
Yes! The tool outputs both standard CSS and Tailwind CSS utility classes. For simple two-color linear gradients, it generates proper Tailwind from-/to- classes. For complex gradients, it provides the arbitrary value syntax.
How many color stops can I add?▼
There's no practical limit. Start with 2 stops and add as many as you need. Each stop has a customizable color and position.
Are the gradients cross-browser compatible?▼
Yes. The generated CSS uses standard gradient syntax supported by all modern browsers. The tool also outputs a solid color fallback for maximum compatibility.
Can I save my gradients?▼
Copy the CSS code and save it in your project. The tool also has 8 curated presets you can use as starting points.