Color · Tools

Gradient generator.

Build linear or radial CSS gradients with multiple color stops. Live preview, instant CSS code, copy with one click.

Inputs

Preview

background: linear-gradient(90deg, #A81327 0%, #8B0E1F 100%);

How the CSS gradient generator works

A CSS gradient is a smooth blend between two or more colours, drawn by the browser instead of loaded from an image file. It costs no download, scales to any size and can be changed with one line of code. This page builds that line for you: choose linear or radial, set the angle for a linear gradient, edit the colour stops, and copy the CSS from the box under the preview. The default output is background: linear-gradient(90deg, #A81327 0%, #8B0E1F 100%);, a red that deepens from left to right.

The parts of the code

The function. linear-gradient() blends along a straight line. radial-gradient() blends outward from a centre point. This tool writes radial gradients as radial-gradient(circle, ...), a circular shape with the browser's default size and position, and does not expose controls for those.
The angle (linear only). The angle sets the direction of the blend line, measured clockwise from the top: 0deg runs bottom to top, 90deg runs left to right, 180deg runs top to bottom and 270deg runs right to left. The keywords to top, to right, to bottom and to left are the same four angles. With no direction at all, CSS uses top to bottom (180deg). The slider here runs from 0 to 360 and starts at 90.
Colour stops. Each stop is a colour plus a position along the line, written here in percent: 0% is the start and 100% the end. The browser blends smoothly between neighbouring stops.

Worked example: a three-colour gradient and a hard-edged stripe

Start from the default and build a warm three-stop gradient. Set the angle slider to 135, then set the three stop rows to #A81327 at 0%, #E8644A at 50% and #F6E3A1 at 100%. The output is background: linear-gradient(135deg, #A81327 0%, #E8644A 50%, #F6E3A1 100%);, which runs from the top-left corner (a deep red) through a coral to a pale cream at the bottom-right corner.

For a hard edge instead of a blend, place two stops at the same position. With four rows set to #A81327 at 0%, #A81327 at 50%, #F6E3A1 at 50% and #F6E3A1 at 100%, the colour changes abruptly at the halfway point and you get two solid bands, a useful trick for stripes and split backgrounds. A hard edge happens whenever a stop sits at or before the previous one's position, because CSS raises a stop that is out of order up to the largest position before it.

How to add a third stop without a hard edge

The Add color stop button appends a grey (#888888) at 50% to the end of the list. The list is used in the order shown and is not re-sorted. That means a grey at 50% sitting after a stop at 100% is treated as sitting at 100%, so the result is a hard edge at the end instead of a middle colour. To get a proper middle stop, change the rows so the positions rise from top to bottom: 0%, 50%, 100%, putting your middle colour on the middle row and the end colour on the last row.

Linear or radial

Use a linear gradient for backgrounds that sweep across a section, buttons and banners. Use a radial gradient for a glow, a spotlight or a vignette, where the colour should spread from a point. Switching to Radial hides the angle slider, since a circle has no direction, and keeps your stops.

Where to put the result

A gradient is a kind of image in CSS, not a colour. It works anywhere an image is accepted, such as background or background-image, and it does not work in background-color. The generated line already begins with background:, so you can paste it directly inside a rule, for example .hero { background: linear-gradient(...); }. A gradient has no fixed size and fills the element it is applied to.

Common mistakes

Putting a gradient in background-color, which ignores it.
Adding a stop and leaving its position lower than the stop above it, which makes a hard edge by accident.
Placing text over a gradient and checking contrast against only one end. Check the text colour against the lightest and the darkest part of the gradient that sits behind it.
Choosing two unrelated hues and expecting a clean blend. Colours far apart on the wheel can pass through duller, greyer mid-tones, so add a deliberate middle stop if you see that.
Assuming Random keeps your stops. It replaces them with two random colours and a random angle.

Who this is for, and what it does not cover

Anyone who wants valid gradient CSS without writing it by hand: designers, developers and people building page templates. This tool does not write conic gradients, repeating gradients, colour hints or alpha transparency, does not set the radial gradient's size or centre, and does not choose the colour space used to blend. For those you can edit the copied CSS by hand using the references below. To find colours to put in the stops, try the colour picker or the palette generator, and use the contrast checker once text sits on top.

Sources

MDN Web Docs, linear-gradient(): angle direction and keyword equivalents, the default direction, hard stops, and gradients as images rather than colours (retrieved 2026-10).
MDN Web Docs, radial-gradient() and Using CSS gradients (retrieved 2026-10).
W3C, CSS Images Module Level 3, the specification that defines gradients and the colour stop rules (retrieved 2026-10).

CSS gradient generator FAQ

How do I use the CSS this generator makes?

Click Copy CSS code and paste the line into a rule for the element you want to colour, such as .hero { background: linear-gradient(90deg, #A81327 0%, #8B0E1F 100%); }. The output already includes the background: property, so paste it as it is, without wrapping it in anything else.

What do the angles in a linear gradient mean?

The angle is the direction of the blend, measured clockwise from the top. 0deg points up, 90deg points right, 180deg points down and 270deg points left, and to top, to right, to bottom and to left are the same four values. A diagonal such as 45deg runs from the bottom-left corner toward the top-right.

How do I make a gradient with three or more colours?

Press Add color stop, then edit the rows so positions increase from top to bottom, for example 0%, 50% and 100%. The new row is appended at the end with 50%, which CSS treats as 100% if the row above is already at 100%, so you must reorder the colours and positions yourself.

How do I make a hard line instead of a smooth blend?

Give two neighbouring stops the same position. A stop at 50% in one colour followed by a stop at 50% in another colour produces an instant change at the halfway point. Add rows until each colour has a start and an end position, then set the matching positions equal.

Can I use a gradient as a background color?

No, not in background-color. A gradient counts as an image in CSS, so it must go in background or background-image. Use background-color as a plain fallback colour alongside it if you want one.

What is the difference between a linear and a radial gradient?

A linear gradient blends in a straight line across the element at an angle you choose. A radial gradient blends outward from a centre point in a circle, so there is no angle. This tool writes radial gradients as radial-gradient(circle, ...) with the browser's default size and position.

How do I keep text readable on top of a gradient?

Contrast depends on the part of the gradient directly behind each piece of text. Check your text colour against both the lightest and the darkest colours in the gradient, not just the starting colour, and keep text away from the zone where the gradient passes through mid-tones that might fall near the text colour.

What does the Random button do?

It replaces your stops with two random colours at 0% and 100% and picks a random angle between 0 and 359 degrees. It is useful for finding starting ideas, but any custom stops you added are discarded, so copy your CSS first if you want to keep it.