utilyfe

CSS Gradient Generator

Design a gradient with a live preview, then copy the CSS. Linear, radial or conic, with as many colours as you need.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Start from a preset

Gradient settings

Type

Colour blending

deg

Colours

  • %
  • %
Also try:Color Contrast CheckerHex to RGB ConverterCubic Bezier Editor

How to use the CSS Gradient Generator

  1. 1Pick a preset to start from, or change the default one.
  2. 2Choose Linear, Radial or Conic, then set the angle, or, for radial and conic, the centre.
  3. 3Edit the colours by typing a hex code or using the picker, and slide each one along the gradient. Add up to eight.
  4. 4Copy the CSS from the box under the preview and paste it into your stylesheet.

Three kinds of gradient

A linear gradient changes colour along a straight line, and is the one behind most page backgrounds, buttons and banners. A radial gradient starts at a centre point and spreads outward, as a circle or an ellipse: good for spotlights, glows and soft vignettes. A conic gradient sweeps around a centre point instead of outward from it, the way colours are laid out on a colour wheel or a pie chart. Switch between them and the same colours are redrawn, so it’s quick to see which suits what you’re making.

Angles and directions

A linear gradient’s angle says which way the colour travels. At 0deg it runs upward, so the first colour is at the bottom and the last at the top; 90deg runs left to right, 180deg top to bottom, 270deg right to left, and everything in between rotates clockwise. A conic gradient uses the angle differently: it’s the point where the sweep begins, with 0deg at twelve o’clock, and the colours then move clockwise around the centre. For radial and conic gradients the centre is set from a grid of nine positions.

Colour stops

Each colour in a gradient is a stop, with a position between 0% and 100% along the gradient. The browser blends smoothly between neighbouring stops. Enter them in any order and the tool writes them sorted by position. The Add a colour button puts a new stop in the widest gap, coloured halfway between the two stops either side of it, so you can refine a gradient without losing its shape. Two stops at the same position make a hard edge with no blend between them: the way to draw stripes, or to split a background into two flat halves.

Choosing a colour blend

Left alone, CSS blends two colours by averaging their red, green and blue values. That works well for colours that are near each other, and badly for ones that aren’t: the halfway point between blue and yellow in RGB is exactly (128, 128, 128), a flat grey, which is why some gradients seem to go dull in the middle. The OKLab and OKLCH options blend in a colour space designed around perception instead. OKLab keeps the change in lightness smooth. OKLCH moves around the colour wheel rather than cutting straight across it, which usually keeps the middle colours saturated. When you choose one, the tool writes the plain version first and the blended one after it, so any browser that doesn’t understand the newer syntax falls back to the plain line.

Fading to transparent

Colours accept eight-digit hex codes, where the last two digits set opacity, so a stop can be fully or partly see-through. Fading a colour to the same colour at zero opacity is the cleanest way to make an element dissolve into whatever is behind it, and the preview draws a checkerboard underneath so you can see exactly which parts are transparent.

Using the CSS

The code is a background declaration, so it can go on any element. Add background-size or background-repeat if you want the gradient to tile, and background-clip: text with a transparent text colour to fill lettering with it. Because the colour under a piece of text varies across a gradient, check contrast at the lightest and darkest points rather than in the middle.

Nothing leaves your browser

There’s no server involved. The gradient is drawn by your browser and the code is assembled in the page as you edit, so nothing you make is sent, stored or logged.

Questions

What's the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line, in the direction you choose. A radial gradient spreads outward from a centre point as a circle or an ellipse. A conic gradient sweeps around a centre point like the hand of a clock, which is how colour wheels and pie-chart backgrounds are made.
Which way does the angle point?
In a linear gradient, 0deg runs from the bottom to the top, so the first colour is at the bottom and the last at the top. 90deg runs left to right, 180deg top to bottom and 270deg right to left: the angle increases clockwise. In a conic gradient the angle is where the sweep starts, with 0deg at twelve o'clock, and it also moves clockwise.
How do I get a hard edge or stripes instead of a smooth blend?
Put two colours at the same position. Red at 50% followed by blue at 50% changes from one to the other instantly, with no blend. Chaining pairs like that gives stripes. The tool keeps stops at the same position in the order you list them, so the edge falls where you expect.
How many colours can I use?
The tool allows up to eight, which is plenty for almost any design. CSS itself has no fixed limit. Every colour has its own position from 0% to 100%, and the tool writes them out in position order so the code is easy to read.
Why do some gradients look grey or muddy in the middle?
By default CSS blends colours by averaging their red, green and blue values. For two colours that sit opposite each other, like blue and yellow, the average of the two is a flat grey: halfway between them in RGB, and nothing like either. Blending in a different colour space avoids it.
What are OKLab and OKLCH, and which should I choose?
They're ways of describing colour that match how we see it better than RGB does. OKLab blends more evenly, so the lightness changes smoothly. OKLCH blends by travelling around the colour wheel instead of straight through the middle, which tends to keep the in-between colours vivid. Try each on your colours and keep the one that looks best; sRGB remains the safe default.
Will the gradient work in older browsers?
Linear, radial and conic gradients work in all current browsers. The OKLab and OKLCH blending options need a fairly recent one. When you pick either, the tool writes a plain sRGB line first and the blended line after it, so a browser that doesn't understand the newer syntax ignores it and uses the plain version.
How do I make a gradient fade out to transparent?
Give a colour an eight-digit hex code. The last two digits are its opacity, so #6366f100 is the colour #6366f1 fully transparent. Fade from the solid colour to that same colour at zero opacity: the Fade out preset does exactly this. The checkerboard behind the preview shows where it's see-through.
Can I use a gradient on text or a border?
Yes, with a little extra CSS. For text, put the gradient on the element's background, then add background-clip: text and make the text colour transparent. For a border, use the gradient with border-image. Text over a gradient still needs enough contrast wherever it sits, so check the lightest and darkest parts.
Is my design uploaded anywhere?
No. The gradient is drawn and the code is written inside this browser tab. Nothing is sent to a server, logged or stored.