CSS gradient generator

Pick colours, drag the stops, copy the CSS or Tailwind class. Ctrl+C copies the CSS.

Type
Output format
background-color: #ff7e5f;
background-image: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

Presets

How to make a CSS gradient

  1. Pick a type and colours

    Start from a preset or Random, then choose linear, radial or conic. Click a colour swatch to change it, and type a hex value if you have one.

  2. Adjust the stops

    Drag the handles on the bar to move a colour stop, use the angle slider to turn the gradient, and press Add stop to blend in another colour. Reverse flips the order.

  3. Copy the code

    Copy the CSS declaration, the Tailwind class or the gradient text snippet. Ctrl+C with nothing selected copies the CSS.

Good to know

  • Click anywhere on the stop bar to add a stop with the colour that already sits there, so the blend does not jump.
  • A selected handle takes the keyboard: arrow keys move it by 1%, Shift plus arrows by 10%, and Delete removes it.
  • Put two stops at the same position for a hard edge. That is how the Stripes and Pie presets work.
  • Angles follow the CSS rule: 0deg points up, 90deg points right and 180deg points down.
  • The CSS tab adds a background-color fallback using the first colour, so very old browsers still show something sensible.
  • Use 8-digit hex such as #0d948880 for a semi-transparent stop; it works in every current browser.

Questions people ask

What is the difference between linear, radial and conic gradients?

A linear gradient changes colour along a straight line at the angle you set. A radial gradient spreads out from a centre point in a circle or ellipse. A conic gradient sweeps around a centre point like a clock hand, which is how pie charts and colour wheels are made.

How do I use the gradient in Tailwind CSS?

Copy the Tailwind tab. It is an arbitrary value class such as bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], with spaces written as underscores, and works in Tailwind 3 and 4 without any config.

Why do I see a hard line instead of a smooth blend?

Two stops share the same position, or a stop sits before the one above it. That is also how stripes are made on purpose. Drag the handles apart, or use the Stripes preset to see the effect.

Can I make gradient text?

Yes. Choose the Text tab in the output. It clips the gradient to the letters with background-clip: text, and the colour is set to transparent so the gradient shows through.

Which browsers support these gradients?

Linear and radial gradients work everywhere. Conic gradients work in every current browser, including Safari 12.1 and later. The CSS includes a solid background-color fallback for anything older.