CSS gradient generator: write gradients by hand or with tools

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

.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); }

Each type has its own guide: linear gradients, radial gradients and conic gradients.

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.

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.

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

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. 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. 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 shows the difference.

3. 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. 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 take this further.

5. 5

   Add a little grain

   A faint noise layer hides banding on large, dark gradients. The code is in CSS noise texture.

.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%);
}

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 shows how to swap gradient tokens per brand or mode.

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

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

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.

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.