Free CSS Gradient Generator
Something not working? Report a problem
About the CSS Gradient Generator
Build linear, radial or conic CSS gradients visually — add colour stops, set direction and angle, get instant preview and copy the ready-to-paste CSS, all in your browser.
How to use the CSS Gradient Generator
- 1Start from a preset or press Random, or pick Linear, Radial or Conic yourself.
- 2Edit colour stops on the bar: drag a stop to move it, tap the bar to add one, drag a stop off the bar to remove it.
- 3Every stop is listed under the bar, left to right. Tap a stop's swatch to edit it in the picker below: drag in the colour square and along the hue and opacity strips, or type a hex code in its row.
- 4Drag the dial to set the direction. For radial and conic gradients, drag the dot on the preview to move the centre.
- 5Copy the code as a CSS background, background-image or a Tailwind class, with an optional solid fallback colour.
Frequently asked questions
What gradient types are supported?
Linear (a direction you set with the dial), radial (circle or ellipse spreading out from a centre you can move) and conic (colours sweeping around a centre, like a colour wheel). Each can also be made repeating. The preview is drawn with the same CSS you copy, so they always match.
How do I add, move or remove colour stops?
Tap anywhere on the bar under Colour stops to add a stop there, in the colour the gradient already has at that point. Drag a stop sideways to move it, or select it and use the arrow keys (Shift moves 10% at a time). To remove one, drag it off the bar, press Delete, or use the bin button. A gradient always keeps at least two stops.
Can I make a gradient fade to transparent?
Yes. Select a stop (its swatch in the list or its handle on the bar) and drag the opacity strip in the picker to the left. The preview shows a checkerboard behind see-through areas, and those stops are written as rgba() colours in the code. The Fade preset is a ready-made example for darkening the bottom of a photo.
Does the copied CSS include a fallback?
Only if you tick Solid fallback colour. That adds a plain colour (the gradient's middle colour) before the gradient, which shows while a page loads or if the gradient is ever dropped. Every current browser supports linear, radial, conic and repeating gradients, so the fallback is optional.
How do I use it with Tailwind CSS?
Under Code, choose Tailwind. You get an arbitrary-value class such as bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)], where underscores stand for spaces. Paste it into your element's className. It works in Tailwind v3 and v4.
Can I undo a change?
Yes. Use the undo and redo buttons above the controls, or Ctrl+Z and Ctrl+Shift+Z (⌘ on a Mac) while you're working in the tool. A whole drag counts as one step. Nothing is saved after you leave the page, so copy your code before you go.