How many colours can the gradient have?

Two, at the ends of the ramp, with no stop positions in between. A third colour means using the multi-stop builder instead.

Can one end be transparent?

Not as generated — both stops are opaque. A gradient that fades out has to come from the transparent gradient tool, or from editing an alpha channel into the copied value.

What does the angle do at 0 and 180?

Zero degrees runs up the page and one hundred and eighty runs down it, with ninety going left to right. The visible direction depends on the shape of the element the gradient is painted into.

Will text on the gradient stay readable?

The tool does not check that. Contrast changes along the ramp, so test the text colour against both ends rather than against a middle value.

Why does the page open on a diagonal?

The slider opens at 135 degrees because that is the diagonal most scrims are built on — the ramp runs across the box rather than straight down, which is usually what a caption wants. Both colours and the angle are editable, so it is a starting point rather than a house style.

Gradient Overlay Generator

From

Angle: 135°

CSS

background: linear-gradient(135deg, #3B82F6, #A855F7);

You Might Also Need

Linear Gradient Generator

Build linear gradients with control over angle

Overlay Color Generator

Generate overlay colors for images and video

Transparent Gradient Generator

Fade any color to transparent

Conic Gradient Generator

Build conic gradients with center & angle

The gradient overlay generator builds a two-colour linear gradient with an adjustable angle, previews it on a large panel and writes the background declaration with a copy button.

What is Gradient Overlay Generator?

Three controls drive the page: a From colour, a To colour, and an angle slider that runs from zero to three hundred and sixty degrees and opens at one hundred and thirty-five.
The endpoints start on a blue and a purple and the angle opens on a diagonal, so the page loads with a usable scrim rather than a flat swatch.

The preview is the same declaration the code panel prints: a linear gradient at the chosen angle between the two colours, applied to a tall panel. Because both stops sit at the extremes with no positions in between, the result is a straight interpolation between the endpoints, and the angle decides the direction — zero points up the page, ninety runs left to right, one hundred and thirty-five runs diagonally down to the right, and one hundred and eighty runs top to bottom.

Two details separate this from the gradient builders elsewhere in the domain. There are exactly two stops, so it is a tool for a single transition rather than for a multi-stop build; and both stops are fully opaque, so the output is a gradient scrim rather than a fade to transparency. A gradient overlay that should let the image show through needs a colour with an alpha value, which means editing the copied declaration or using the transparent gradient tool instead.

The generated CSS is a single background declaration rather than a whole element or a set of custom properties, which makes it easy to drop onto a pseudo-element. The two things worth checking before that: the angle's effect on a wide versus a tall element, since the same degree value reads differently as the box's aspect ratio changes, and the contrast of any text that will sit on the gradient, which is a pair of separate questions because the colour changes along the ramp.

As a gradient scrim css source the page is quick and predictable: pick the two ends, settle the direction, copy one line. It is a good fit for hero overlays, tinted cards where one corner should be stronger than the other, and any surface that needs a directional wash rather than a flat fill.

Choosing the two ends is the part that rewards a little thought. Stops that are close in value produce a wash that reads as a single surface, which suits page backgrounds and card headers; widening the gap between them produces a visible diagonal, which suits a hero panel or a corner accent. Because the preview updates live, that judgement is made by eye rather than by guessing at hex values, and the angle can be settled at the same time — a gradient that looks right at one hundred and thirty-five degrees often reads as heavy-handed at zero, since the ramp then climbs the full height of the element.

Limits: two stops, one of them never transparent, no stop positions, no repeating gradients, no radial or conic form, no easing, and one copy button for the whole declaration.
Within those limits it is a dependable gradient overlay generator: a two color gradient css background at any linear gradient angle, and every overlay gradient hex value it uses is one you supplied.

How to use Gradient Overlay Generator

Set the From colour and the To colour.
Drag the angle slider and watch the panel — 0 points up, 90 runs right, 180 runs down.
Copy the background declaration and apply it to the element the gradient should wash over.

When to use Gradient Overlay Generator vs related tools

Use this when a surface needs a two-colour directional wash and one line of CSS is the output. Use the transparent gradient generator when the ramp should fade out rather than end on a second colour, or the multi-stop gradient builder when more than two colours are needed. When it is the type rather than the surface that should carry a gradient, the text gradient generator is the lettering version, and a ramp that dissolves to nothing at one end is what the transparent gradient generator writes.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.