CSS Gradient

What it's for

Build the CSS for a gradient: a smooth blend from one colour to another. Linear gradients run along a line at an angle, radial ones spread out from a point, and conic ones sweep round a point like the hand of a clock. The preview updates as you type, and the CSS box has the background line to paste into your stylesheet.

For example, when you’re designing a hero banner, try a few colour pairs and angles here, then copy the one you like.

How to use it

Choose the Type. Linear and conic take an Angle in degrees (for linear, 0 points up and 90 points right; for conic, it is where the sweep starts). Radial takes a Shape, and radial and conic take a Centre, written as a CSS position such as 30% 40% or left top; leave it blank for the middle.

Type the Colour stops one to a line: a colour (a name, #hex, rgb(), hsl(), oklch()), then a position such as 40% or 120px if you want one. Stops with no position are spread evenly. Tick Repeating to repeat the pattern, which needs positions that stop short of the end (such as 0% and 20%), and Mix colours in oklch to blend through a space that avoids muddy greys in the middle. The type, angle and stops are remembered in this browser.

Example

Choose Linear, set the angle to 45 and type these stops:

#1e3c72 0%
#2a5298 60%
#7eb6ff 100%

The CSS box then shows:

background: linear-gradient(45deg, #1e3c72 0%, #2a5298 60%, #7eb6ff 100%);

Good to know

It makes the gradient CSS only; it doesn’t draw gradient meshes, fix banding or write the older -webkit- forms. Colours are checked by your browser, so one it doesn’t know (such as oklch() in an old browser) is refused, and the preview shows what your browser draws, which can differ slightly in another. There is no colour picker: type or paste colours as text. Check that text on a gradient still has enough contrast.