CSS Gradient Generator

about this tool

Three kinds of gradient, one model

A gradient in CSS is a kind — linear, radial or conic — a direction or centre, an optional colour space to blend in, and a list of colour stops. The tool holds exactly that and writes it out with the defaults left off, so a centred ellipse is radial-gradient(#fff, #000) and not the twelve-word version the spec would also accept. Linear gradients take an angle (the six arrow buttons are the common ones; to right is 90°, to bottom 180°), radial ones a shape, a size keyword and a centre, conic ones a start angle and a centre. Any of them can be repeating.

Stops take any CSS colour — hex, rgb(), hsl(), oklch(), a name, transparent — kept exactly as typed, with an optional position and an optional hint, the bare percentage between two stops that moves the midpoint of their blend. A colour the browser would not understand is flagged on its row. Space evenly, reverse and add-stop do what they say; a new stop lands halfway between the last two.

Colour spaces

Browsers blend in sRGB unless told otherwise, and the straight line between two saturated colours in sRGB runs through grey, which is the muddy band in the middle of so many gradients. in oklch blends in a perceptual space and keeps the middle vivid; in oklab, hsl, lab, lch and srgb-linear are offered too. Browsers that predate the syntax ignore it and blend in sRGB, so the gradient still renders — it just looks the old way.

Output

The CSS block has two lines: a solid background-color taken from the first stop, for browsers that cannot draw the image or before it is ready, and the background-image. The Tailwind block uses the v4 utilities wherever they exist — bg-linear-to-r, bg-linear-45, bg-radial, bg-conic-90, from-, via- and to- with percentage positions and a /oklch colour space modifier — and drops to an arbitrary value, bg-[linear-gradient(…)] with underscores for spaces, when the gradient has more than three stops, a hint, or repeats. The panel says which case applies and why.

Editing what you already have

Paste an existing gradient, with or without background: in front, and it becomes editable: angles in deg, turn, rad or grad; to keywords (corner keywords such as to top right depend on the box's shape, so they are read as 45° and the tool says so); radial shapes, sizes and at positions in percentages or words; from angles on conics; in <space>; colours in any CSS syntax; positions in percent, including the two-position shorthand that makes a hard stop. What cannot be read is refused with the reason, not silently dropped.

Limits

Positions are percentages only; pixel or em lengths in stops are refused on import and not offered in the editor. Corner keywords are approximated. Tailwind output uses arbitrary hex colours rather than matching the default palette, and the colour space modifier is written even for the sRGB explicit choice. Nothing is stored between visits.

Gradients are easier to build from a scale than from two arbitrary colours — the colour palette generator gives you one. Once the rule is in your stylesheet, CSS formatter & minifier tidies it.

questions

How do I write a CSS gradient?

As a background image: background-image: linear-gradient(135deg, #ff8800 0%, #ff0080 100%). The first argument is the direction — an angle, or "to right" — and the rest are colour stops, each a colour with an optional percentage. radial-gradient() takes a shape, size and "at x y" centre instead of an angle; conic-gradient() takes "from <angle> at x y". Set a plain background-color first as a fallback.

Why is there a grey band in the middle of my gradient?

Browsers blend in sRGB by default, and the straight line between two saturated colours in sRGB passes through desaturated greys. Adding "in oklch" after the direction — linear-gradient(90deg in oklch, red, blue) — blends in a perceptual space and keeps the middle vivid. Older browsers ignore the keyword and fall back to sRGB, so it is safe to add.

How do gradients work in Tailwind v4?

bg-linear-to-r, bg-linear-45, bg-radial and bg-conic set the image; from-, via- and to- set up to three colour stops, with from-10% style positions and a /oklch modifier for the colour space. Anything beyond that — four stops, hints, repeating gradients — goes in an arbitrary value: bg-[linear-gradient(…)] with underscores for spaces. The tool writes whichever applies.

What is a colour hint?

A bare percentage between two stops that says where the transition between them is halfway. linear-gradient(90deg, red, 20%, blue) reaches the midpoint colour at 20% rather than 50%, which shifts the blend towards one end without adding a stop. Few tools expose it; this one does.

How do I make stripes?

With repeating-linear-gradient and hard stops: two stops of the same colour at 0% and 10%, then two of the next colour at 10% and 20%. The pattern tiles every 20% of the gradient line. The "stripes" preset is exactly that at 45 degrees.