TodayTools

CSS gradient generator

Smooth gradients for a portfolio, a landing page or a festival banner.

PrivateNo uploadsRuns in your browser

Donate

Each dot on the bar is one colour. Drag a dot to move it; Position says where it sits.

Type

Linear blends in a straight line; Angle turns it.

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

Presets

A man working on a laptop on a sunny rooftop

For your own website

Colours that make your page feel alive.

The portfolio launch. A soft sky blue behind his name.

BeforeGuessing colour codes

With sdevPick, preview, copy

  • A man writing notes next to his laptop

    The festival banner

    Warm colours ready in a minute.

  • A man working on a laptop beside a drink

    The school club page

    Copy the code and the page glows.

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 dots on the bar to move a colour, use the angle slider to turn the gradient, and press Add colour to blend in another one. 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.

Where people use it

  • A hero background

    Make a soft two-colour background for the top of a landing page.

  • Gradient text for headings

    Fill a big heading with colour for a bold title.

  • Match your brand colours

    Type your brand HEX codes as stops and copy the CSS.

  • Find the right shade

    Need lighter or darker steps of a brand colour? Get tints and shades first.

    Color converter

  • Add depth to cards

    Pair the gradient with a soft shadow for cards and buttons.

    CSS box shadow generator

Why this one

You shape the gradient by dragging stops on a live preview, and copy it as CSS or Tailwind in one click.

  • Drag colour stops and see the result live.
  • Copy plain CSS or Tailwind classes.
  • Ready presets to start from.
  • No sign-up, works on phones.

What you can change

  • Linear, radial or conic
  • Angle and position
  • Colour stops
  • Circle or ellipse
  • CSS, Tailwind or text output

People find this page by searching

  • css gradient generator
  • linear gradient css
  • gradient generator
  • radial gradient css
  • conic gradient css
  • tailwind gradient generator
  • gradient background css
  • gradient text css
Cite this tool
  • APA
    sdev.in. (n.d.). CSS gradient generator [Web tool]. https://www.sdev.in/tools/css-gradient
  • MLA
    "CSS gradient generator." sdev.in, https://www.sdev.in/tools/css-gradient.
  • Chicago
    sdev.in. "CSS gradient generator." https://www.sdev.in/tools/css-gradient.
  • BibTeX
    @misc{sdev-css-gradient,
  title = {CSS gradient generator},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/css-gradient}},
  note = {Web tool}
}

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.

Donate