# CSS gradient generator: write gradients by hand or with tools

[Canonical HTML page](https://gradiently.design/guide/css-gradient-generator)

Most generated gradient code is fine to paste and slightly out of date. Learn the four parts of a gradient and you can write one faster than you can find a generator, then tune it in ways no slider offers.

## The short version

- A CSS gradient generator turns colour and angle choices into a background-image value you can paste into a stylesheet.
- Every CSS gradient has four parts: a type, a direction or position, an optional interpolation colour space, and a list of colour stops.
- Older generators still output vendor prefixes and legacy Internet Explorer filters, which modern browsers do not need.
- Adding a third colour stop, an interpolation space such as oklch, or a second layer usually improves generated output more than changing the colours.
- Storing a finished gradient in a custom property makes it reusable across a site and easy to change in one place.

A **CSS gradient generator** gives you a gradient value to paste, such as `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, after you pick colours and an angle. It is a fine starting point. But a CSS gradient is short enough to write by hand in under a minute, and hand written code is where the improvements live: a third stop, a better colour space, a second layer. This page shows how to read generator output, clean it and write your own.

## The four parts of every CSS gradient

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Everything a generator's sliders control maps onto one of these four parts.

| Part | Options | Default if left out |
| --- | --- | --- |
| Type | `linear`, `radial`, `conic`, plus `repeating` versions | None, you must choose |
| Direction or position | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Top to bottom; centred ellipse; from 0deg |
| Colour space | `in oklab`, `in oklch`, `in srgb` and others | sRGB for hex colours |
| Stops | Any colours, with optional positions in percent or length | Spread evenly from 0% to 100% |

The defaults explain why so many generated gradients look alike: two stops, evenly spread, blended in sRGB.

Each type has its own guide: [linear gradients](https://gradiently.design/guide/css-linear-gradient), [radial gradients](https://gradiently.design/guide/css-radial-gradient) and [conic gradients](https://gradiently.design/guide/css-conic-gradient).

## Gradient recipes to copy

These are written by hand rather than generated, and each uses one idea a basic generator rarely gives you: an off centre light, three stops instead of two, or a chosen colour space. Click any to copy it.

- Dusk, three stops: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Sea glass: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Ember in the corner: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Soft paper: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Northern green: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violet to orange through pink: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

The last one is only two stops, but blending in oklch carries the hue through a vivid pink, where sRGB gives a duller mauve. Browsers without colour space support fall back to no gradient, so declare a plain gradient first.

## How to clean up generator output

Paste from an older generator and you may get five lines where one will do. Prefixed gradients and the Internet Explorer filter have been unnecessary for years; they add weight and, in the case of the old `-webkit-` syntax, use a different angle system that confuses anyone editing later.

### Typical old output

- `background: #1e1b4b;` then three prefixed copies
- `-webkit-linear-gradient(left, ...)` with the old angle rules
- `filter: progid:DXImageTransform...` for Internet Explorer
- `rgba(30, 27, 75, 1)` for fully opaque colours

### Clean modern code

- One solid `background-color` fallback
- One unprefixed `linear-gradient()`
- No filters
- Short hex or `rgb(30 27 75 / 0.5)` only where alpha matters

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Everything an old generator's output was trying to say, in two lines.

Your browser is also a decent generator. Open the developer tools, select the element and click any colour swatch inside the gradient in the Styles panel: you get a colour picker for that stop, and you can edit angles and percentages in place while the page updates live. Copy the finished value back into your stylesheet. For tuning a gradient against real content, that beats any standalone tool, because you see it behind your actual headline.

## Five edits that beat any slider

1. **Add a middle stop** Two stops give a straight ramp. A third colour at around 50 to 60 percent adds depth and lets you control where the change happens.
2. **Choose the colour space** Add `in oklab` to keep blends between distant colours clean, or `in oklch` to let the hue travel. [Gradient interpolation](https://gradiently.design/guide/gradient-interpolation) shows the difference.
3. **Move the light off centre** Swap a linear gradient for `radial-gradient(circle at 80% 20%, ...)` so the brightest colour comes from a corner, like a light source.
4. **Layer two or three gradients** Comma separate several values in `background-image`. Radial glows over a linear base look far richer than one gradient; [CSS mesh gradients](https://gradiently.design/guide/css-mesh-gradient) take this further.
5. **Add a little grain** A faint noise layer hides banding on large, dark gradients. The code is in [CSS noise texture](https://gradiently.design/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Three layers written by hand: a pink light at the top right, an indigo pool at the bottom left, a dark base. The first layer listed sits on top.

## Turning a gradient into a reusable token

Once a gradient is right, give it a name. A custom property holds the whole value, so buttons, banners and the hero can share it, and a redesign touches one line. [CSS variables for theming](https://gradiently.design/guide/css-custom-properties-theming) shows how to swap gradient tokens per brand or mode.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

One definition, used everywhere. If the colours change, nothing else in the stylesheet has to.

## When a generator isn't the right tool

Generators and hand written CSS share the same limit: the result is a list of stops anyone can read in your stylesheet and reuse. That is fine for interface details. For the background people recognise you by, on your site and every post, you may want something richer and harder to copy. The broader advice is in [how to use a gradient generator](https://gradiently.design/guide/gradient-generator).

Gradiently's Marks go beyond what CSS can describe: stacked materials, light, grain and motion, rendered live at every size, with exactly one owner at a time. You can design with any unclaimed Mark for free and search the Market by colour words to find one close to the gradient you were trying to write.

## FAQ

### What is a CSS gradient generator?

A tool that lets you choose colours, angle and type visually, then outputs a `linear-gradient()`, `radial-gradient()` or `conic-gradient()` value to paste into CSS.

### Do I still need -webkit- prefixes for CSS gradients?

No. Unprefixed gradients work in every current browser. Remove prefixed copies and old Internet Explorer filters from generated code.

### How do I write a CSS gradient by hand?

Choose a type, a direction, and two or more colour stops: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Why does my generated gradient look muddy in the middle?

It blends in sRGB, which greys out between distant colours. Add `in oklab` after the angle, or add a middle stop in a cleaner colour.

### How do I reuse a gradient across a website?

Store the whole gradient in a custom property such as `--gradient-brand` and use `var(--gradient-brand)` wherever you need it.