Gradient Generator
Design CSS gradients visually with multiple color stops. Supports linear, radial, and conic gradient types. Exports both CSS and Tailwind class formats.
CSS gradients are created with linear-gradient(), radial-gradient(), or conic-gradient(). This tool lets you build gradients visually by adding color stops and dragging their positions, then exports the result as CSS or Tailwind classes.
.element {
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
}bg-gradient-to-b from-[#7c3aed] to-[#ec4899]
Frequently Asked Questions
Does it output Tailwind classes?
Yes! The generator outputs both standard CSS and equivalent Tailwind gradient utilities for both class approaches.
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line. Radial gradients spread outward from a center point in a circle or ellipse. Conic gradients sweep around a central point like a color wheel — great for pie charts and dial effects.
How do I control gradient direction?
For linear gradients, set the angle in degrees (e.g., 135deg for diagonal) or use keywords like to right, to bottom left. The angle slider in the tool updates the CSS in real time.
Can I add more than two color stops?
Yes. Click 'Add color stop' to add as many stops as you need. Position each one at a specific percentage along the gradient to control the transition precisely.