CSS GRADIENT GENERATOR
Create, preview, and export CSS linear, radial, and conic gradients. Add and drag color stops, then copy CSS or Tailwind code with one click.
Frequently Asked Questions
How does the CSS Gradient Generator work?
Is the CSS Gradient Generator free to use?
What gradient types are supported?
Can I export as Tailwind CSS?
Does this tool support multiple color stops?
Can I share my gradient settings?
Is my gradient data stored or sent anywhere?
How to Use
Pick a Gradient Type
Choose from Linear, Radial, or Conic using the type selector. Each type has unique controls.
Add Color Stops
Click on the gradient bar to add color stops. Each stop gets its own color picker and hex input.
Adjust Angle & Shape
For linear gradients, use the angle slider or preset buttons (0\u00b0, 45\u00b0, 90\u00b0, etc.). For radial, choose circle or ellipse shape.
Fine-Tune with Sliders
Drag color stops left or right to adjust their position. The gradient updates instantly as you drag.
Export CSS or Tailwind
Copy the generated CSS background value or Tailwind-compatible classes with one click.
How to Calculate
The CSS Gradient Generator constructs standard CSS background property values using the CSS gradient function syntax: linear-gradient(angle, stop1, stop2, ...), radial-gradient(shape size at position, stop1, stop2, ...), or conic-gradient(from angle, stop1, stop2, ...). Each color stop is formatted as color position%. The preview renders the gradient in real-time using the browser's native CSS gradient engine.
About the CSS Gradient Generator
The CSS Gradient Generator is a free online tool for creating, previewing, and exporting CSS gradients. Choose from linear, radial, or conic gradient types, then build your gradient visually by adding and arranging color stops on an interactive bar. Each stop has its own color picker and hex input, and you can drag stops to fine-tune their positions.
Linear gradients offer intuitive angle control with preset buttons (0°, 45°, 90°, 135°, 180°, 270°) and a fine-grained slider. Radial gradients support circle and ellipse shapes. Conic gradients support custom rotation. All types support unlimited color stops with percentage-based positioning.
Export your gradient as standard CSS background code or Tailwind-compatible classes (v3 and v4). Share your exact gradient via URL hash. Built with privacy in mind — all processing happens in your browser, no sign-up required, no data stored, no tracking.