What does the angle in a CSS gradient mean?

It is the direction the gradient travels. 0deg goes upwards, 90deg to the right and 180deg downwards.

How do I make a hard line between two colours?

Give two colour stops the same position, for example both at 50%. The colours meet without blending.

Why does my gradient look grey in the middle?

Blending two distant hues in sRGB passes through grey. Add a bright middle stop, keep the hues closer, or use the in oklch interpolation hint in newer browsers.

Do I need vendor prefixes?

No. Linear and radial gradients work unprefixed in all current browsers.

Do CSS gradients work in email?

Not reliably. Desktop Outlook on Windows ignores them, so always set a solid background colour as a fallback.

CSS Gradient Generator - Linear & Radial Gradient Maker

Create a CSS gradient and copy the code

Build a linear or radial gradient visually: pick the colours, drag their positions, set the angle or shape, and copy a ready-to-use CSS background declaration. The preview updates as you work, and nothing is uploaded.

Linear and radial

Linear gradients run in a straight line at an angle. In CSS, 0 degrees points up, 90 degrees to the right and 180 degrees down, so 90deg is the same as writing to right.
Radial gradients spread out from the centre, as a circle or as an ellipse that follows the shape of the element.

Each colour stop has a position from 0 to 100%. Two stops at the same position create a hard edge instead of a blend, which is how stripes and split backgrounds are made.

Avoiding the grey middle

Browsers blend gradients in the sRGB colour space by default, and two colours that sit far apart on the colour wheel, such as blue and orange, pass through a dull grey in the middle. Two fixes: add a stop in the middle with a vivid colour between them, or keep the hues closer together. Newer browsers also accept an interpolation hint, for example linear-gradient(in oklch, …), which keeps the middle bright. Browsers that do not understand it ignore the whole line, so put a plain gradient before it as a fallback.

Using gradients well

Text on a gradient must stay readable over its whole length. Check the text colour against both ends with the contrast checker.
Subtle beats loud for large backgrounds. Two shades of the same hue, a few steps apart in lightness, look polished and rarely clash with content.
Banding, visible stripes in a smooth gradient, shows up when two close colours stretch over a large area. A little more contrast between the stops, or a faint noise texture, hides it.
Add a fallback colour. Put background-color with a solid colour before the gradient. Some email clients, notably desktop Outlook on Windows, do not support CSS gradients at all.

Browser support

Linear and radial gradients have worked unprefixed in every major browser for about a decade, so the copied code needs no -webkit- or other prefixes. Gradients are drawn by the browser, which keeps them sharp on any screen and lighter than an image file.