Skip to content
JustTools

CSS Gradient Generator

Design a gradient by dragging colour stops — then copy the CSS or Tailwind classes, or download it as a wallpaper.

Runs in your browser Free · no sign-up

At a glance

  • Linear, radial and conic gradients, with repeating stripes and rings.
  • Drag colour stops along a bar, click to add one, and set each stop’s colour, opacity and position.
  • Blend colours in OKLCH or OKLab for vivid, even gradients without the grey middle of classic sRGB — with an automatic fallback for older browsers.
  • Copy ready-made CSS, Tailwind CSS v4 classes or gradient text CSS.
  • Download the gradient as a PNG in Full HD, 4K, square or phone sizes — for wallpapers, slides and posts.
  • Twelve presets, a random button and a reverse button to get started fast. Everything runs in your browser.

Step by step

How to make a CSS gradient

  1. 1

    Pick a starting point

    Choose a preset, press Random, or start from the default.

  2. 2

    Edit the colour stops

    Click the bar to add a stop, drag stops to move them, and choose each colour and its opacity.

  3. 3

    Set the type and direction

    Choose linear, radial or conic and turn the angle dial — or tap the preview to move a radial centre.

  4. 4

    Copy the code

    Copy the CSS or Tailwind classes, or download a PNG.

Features

Everything you need, nothing you don’t

Three kinds

Linear, radial and conic, repeating or not.

Drag-and-drop stops

Up to 16 stops with colour, opacity and position.

Smooth blending

OKLCH and OKLab interpolation, with an sRGB fallback.

Tailwind ready

v4 gradient utilities, checked against Tailwind itself.

Gradient text

Preview and copy CSS for gradient-coloured headings.

PNG wallpapers

Up to 4K, painted at full resolution.

Linear, radial and conic gradients

TypeWhat it looks likeCSS
LinearColours change along a straight line at any angle.linear-gradient(135deg, …)
RadialColours spread out from a centre as a circle or ellipse.radial-gradient(circle at 50% 30%, …)
ConicColours sweep around a centre, like a colour wheel or pie chart.conic-gradient(from 0deg, …)
RepeatingThe stops repeat to make stripes, rings or rays.repeating-linear-gradient(…)

Why OKLCH gradients look better

Browsers used to blend gradient colours in sRGB, the same space that stores the colours. Mixing blue and yellow that way passes through grey, and red to blue goes through a dull purple. OKLCH and OKLab are colour spaces built around how we see brightness and colour, so the middle of the gradient stays bright and saturated. CSS has supported in oklch since 2023 (Chrome 111, Safari 16.2, Firefox 127); the generated CSS includes an sRGB version first, with extra in-between stops, so older browsers show nearly the same result.

FAQ

Frequently asked questions

How do I add a gradient background in CSS?

Use background: linear-gradient(135deg, #7f5af0 0%, #e45fd0 100%); on the element. Design it here and press Copy to get the exact code.

How do I make a gradient in Tailwind CSS?

In Tailwind v4 use bg-linear-to-r from-[#7f5af0] to-[#e45fd0] (or an angle such as bg-linear-65), with via- for a middle colour. The Tailwind tab gives these classes; gradients with more stops become an arbitrary bg-[…] value.

How do I make gradient text?

Give the text a gradient background, then clip it to the text: background-clip: text; color: transparent;. Switch the preview to Text and copy the Gradient text tab.

Can I use transparency in a gradient?

Yes. Lower a stop’s opacity to fade to transparent — useful for overlays on photos. The preview shows a checkerboard behind transparent parts.

Can I download the gradient as an image?

Yes. Choose a size — up to 4K, square or phone — and press Download PNG.

Do the gradients work in all browsers?

Linear, radial and conic gradients work in every current browser. OKLCH blending needs a 2023 or newer browser; the CSS includes an sRGB fallback line for older ones.

Keep going

Related tools

New

CSS Box Shadow Generator

Free CSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.

CSS ToolsOpen
New

CSS Glassmorphism Generator

Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.

CSS ToolsOpen
New

CSS Neumorphism Generator

Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.

CSS ToolsOpen
New

CSS to Tailwind Converter

Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.

Developer ToolsOpen
New

Image Color Picker

Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.

Image ToolsOpen
New

Bento Grid Generator

Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.

CSS ToolsOpen

Browse every tool

Last updated Report a problem or suggest a feature