CSS Gradient Generator
Design linear, radial and conic gradients visually. Drag colour stops, preview on any shape, copy CSS or Tailwind in one click.
Presets
Type
Direction
Color Stops
.gradient {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}How it works
Pick a preset or type
Start from a preset or choose linear, radial or conic from scratch.
Edit colour stops
Drag handles on the gradient bar. Click to add, delete to remove.
Preview & copy
See it on backgrounds, cards, buttons or text — then copy CSS or Tailwind.
Frequently asked questions
What types of CSS gradients can I create?
Linear gradients (with any angle), radial gradients (circle or ellipse), and conic gradients. All support unlimited colour stops with drag-to-reposition handles.
How do I add or remove colour stops?
Click anywhere on the gradient bar to add a new stop at that position. Select a stop and click the delete icon to remove it. You need at least two stops.
Can I use the output with Tailwind CSS?
Yes. Switch to the Tailwind tab for class-based output. Linear gradients map to from-*, via-*, to-* utilities. Radial and conic gradients fall back to CSS since Tailwind has no built-in support.
How do I use gradient on text?
Switch the preview to Text mode to see it live. In your code use background with the gradient, then add background-clip: text and -webkit-background-clip: text, and set color: transparent.