CSS gradient generator
Design a linear, radial or conic gradient, watch it update live, and copy the CSS background rule.
Runs entirely in your browser
Colour stops
Presets
Stop colours can be any colour your browser understands (HEX, names, rgb(), hsl(), oklch()). Up to 10 stops. Positions are percentages; the output is plain CSS with no vendor prefixes.
How to make a CSS gradient
- Choose Linear, Radial or Conic, or start from a preset.
- Set the angle or position, then edit the colour stops: change each colour and position, add stops, and move them up or down.
- Press Copy CSS and paste the rule into your stylesheet. Tick the fallback option if you want a solid colour line before it.
Reading a CSS gradient
A CSS gradient is an image that the browser draws itself, so it scales to any size and costs no download. A linear gradient blends colours along a line set by an angle. A radial gradient blends outward from a centre point in a circle or an ellipse. A conic gradient sweeps the colours around a centre like the hand of a clock, which makes it the natural choice for pie charts and colour wheels.
Each colour stop is a colour plus a position along the gradient line, written as a percentage. Between two stops the browser blends smoothly. If two stops share a position, the blend has no width and you get a sharp edge. If a stop is placed earlier than the one before it, browsers treat it as sitting at the earlier stop's position, which is why this tool lets you reorder and sort stops.
The rule is written as background: so it works on any element. Gradients are drawn on the background, so text on top of them needs the same contrast care as text on a flat colour: check the lightest and darkest parts of the blend separately.
Tips
- Choose stop colours that go together with the Color palette generator.
- Convert a stop between HEX, RGB and HSL in the Color converter.
- Shipping the stylesheet? Shrink it with the CSS minifier.
Questions
What does the angle mean in a linear gradient?
0deg points to the top, so the gradient runs from the bottom edge up. 90deg runs left to right, 180deg top to bottom, and 270deg right to left. 360deg is the same direction as 0deg. The tool writes the number you enter with the deg unit.
How do I get a hard edge instead of a smooth blend?
Give two neighbouring stops the same position. For example, red at 50% followed by blue at 50% switches colour at the halfway point with no blend. The Hard stripes preset shows this.
What does the repeating option do?
It writes repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient. The pattern between your first and last stop is tiled, so it only shows when the last stop is before 100%. Try stops at 0%, 10% and 20% to get stripes.
What is the solid fallback line for?
A browser that cannot read the gradient ignores that line and keeps the earlier one. Browsers that support gradients, which is nearly all in use, override it. The fallback is the colour of your first stop.
Which colour formats are accepted?
Anything the CSS color property accepts in your browser: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) or oklch(0.5 0.2 260). Typing something else shows a message and leaves the last good gradient on screen.
Does a conic gradient need a position?
It always has a centre, and this tool writes it as percentages, so 50% 50% is the middle of the box. The start angle rotates where the colour sweep begins, measured clockwise from the top.