Build a CSS gradient

How to use the CSS Gradient Generator

1. Pick linear, radial or conic.
2. Set how many colour stops you want and choose each colour and position.
3. Adjust the angle or centre point until the preview looks right.
4. Copy the CSS, which includes a flat-colour fallback.

The three gradient functions

linear-gradient() runs colour along a straight line. The angle is measured clockwise from "up", so 0deg goes bottom to top, 90deg left to right and 180deg top to bottom. Keyword forms such as to bottom right behave slightly differently from the equivalent degree value on a non-square box, because the keyword form guarantees the corner colour lands exactly on the corner.

radial-gradient() radiates from a point. A circle keeps its shape whatever the box proportions; an ellipse stretches to match them, which is usually what you want for a wide hero section. conic-gradient() sweeps the colours around a centre point like a clock face, which is what makes pie charts, colour wheels and progress rings possible in pure CSS.

Colour stops and hard stops

Each stop is a colour plus a position. Omit positions and the browser distributes them evenly. Two stops at the same position produce a hard edge rather than a blend, which is how you build stripes, progress bars and colour-block backgrounds without images:

background-image: linear-gradient(90deg, #e11 0%, #e11 50%, #16a 50%, #16a 100%);

Positions must not run backwards. If you enter a stop before the previous one the browser clamps it to the earlier value — this tool does the same so the preview matches what ships.

The grey dead zone

By default browsers interpolate in sRGB, which takes a straight line through the colour cube. Between two saturated complementary colours — blue and orange, say — that line passes close to grey, so the middle of the gradient looks washed out. Two fixes: add a saturated mid stop, or ask for a different interpolation space with linear-gradient(in oklch, …), which keeps chroma up across the ramp. Interpolation keywords are supported in current Chrome, Safari and Firefox, so keep a plain version as a fallback if you support older browsers.

Practical notes

• Always set a background-color as well. If the gradient is dropped — by an old browser, by an email client, or by a user stylesheet — text still has something readable behind it.
• Check text contrast against the lightest and darkest points of the gradient, not the average. Passing WCAG AA at the middle and failing at one end is a common accessibility bug.
• Gradients are painted, not composited, so animating background-image forces a repaint every frame and is slow. Animate the opacity or transform of a layered element with a static gradient instead.
• background-image accepts several comma-separated gradients. Stack a subtle transparent one over a solid one for texture — the first in the list sits on top.
• For SVG, linearGradient and radialGradient take the same stop offsets. SVG has no conic type, so export a raster image if you need a conic effect there.

Privacy

This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.

Last updated 2026-09-23.