What exactly is the generated value?

A linear gradient at 180 degrees from your colour to the keyword transparent, printed as a background declaration with the whole value on the copy button.

Why does transparent behave differently between engines?

The keyword resolves to transparent black rather than to your colour with zero alpha. Engines that interpolate in premultiplied alpha keep the fade clean; others can introduce a grey haze, which explicit alpha avoids.

Can I fade from left to right?

Not in the tool. The angle is fixed at 180 degrees, so a horizontal scrim means editing the angle in the copied declaration.

Can the fade start at partial opacity?

No. The gradient always begins with your colour at full strength, so a softer start requires setting an alpha value on the colour by hand.

Can the fade end on a second colour instead of transparency?

Not here — the ramp always finishes fully transparent. A wash between two colours, transparent at neither end, is what the gradient overlay generator or a gradient builder produces.

Transparent Gradient Generator

Color

CSS

background: linear-gradient(180deg, #3B82F6, transparent);

You Might Also Need

Gradient Overlay Generator

Layer a gradient over an image

Noise & Grain Texture Generator

Add a noise or grain texture to a gradient

Gradient from Image

Extract a gradient from any image

Conic Gradient Generator

Build conic gradients with center & angle

The transparent gradient generator writes a top-to-bottom CSS gradient that fades a colour into transparency, with a tall preview panel and the declaration ready to copy.

What is Transparent Gradient Generator?

One colour field is the only control: choose a colour and a tall panel fills with a gradient that starts at that colour at the top and reaches full transparency at the bottom.
Underneath, a code panel prints the single declaration that produced it, with a copy button for the whole value.

The gradient to transparent is written as a linear gradient at 180 degrees with two stops: your colour and the keyword transparent. One hundred and eighty degrees in CSS means top to bottom, so the fade always runs vertically downwards, and the second stop carries no position, which places it at the far end of the box. The angle and the stop placement are fixed, so the only decision the tool asks for is which colour fades out.

There is a subtlety in that keyword worth understanding. Transparent resolves to transparent black, not to your colour at zero alpha, so the interpolation runs from your colour to a clear black. Modern engines interpolate in premultiplied alpha, which removes the black and keeps the fade clean; some unusual renderers can show a grey haze partway through. Where a fade has to be exact everywhere, naming the end colour with an explicit zero alpha value is the safer form.

The dominant use is an overlay: a scrim that is opaque where it meets a caption and invisible where it meets an image. Because the output is a background value, it can be layered over anything through a background-image list or a pseudo-element, and because it reaches full transparency there is no visible seam at the bottom edge. The same shape hides the foot of a scrolling panel and softens the top edge of a coloured surface.

Choosing the colour is mostly a question of what the overlay sits on. A scrim over a photograph usually takes the hue of the image's dominant tone, so the fade reads as part of the picture rather than as a panel laid over it; a fade at the foot of a coloured card usually takes the card's own colour, which keeps the dissolve invisible until it matters. Because the gradient starts at full strength, the value at the top edge is exactly the colour chosen, and any transparency in the overlay comes from how far the ramp has travelled rather than from the colour itself.

The fade runs top to bottom only, so a left-to-right scrim has to be re-angled in the copied code.
There is no second colour, no stop slider and no starting opacity, so the gradient always begins at full strength — a scrim that should top out at eighty percent needs a manual edit of the colour's alpha.

There is also no image handling, no preview against real content, no separate copy button per declaration and no contrast advice for whatever will sit on the overlay. What it does, it does in one pick: as a transparent gradient generator it produces a usable fade to transparent css value, and for a quick gradient fade overlay at the foot of a card or the top of an image, the copyable css overlay fade value is the entire interaction.

How to use Transparent Gradient Generator

Pick the colour the overlay should start from.
Check the panel, which shows the same top-to-bottom fade the CSS will produce.
Copy the declaration and apply it as a background or on a pseudo-element over the content it should scrim.
Edit the angle in the copied value if the fade needs to run horizontally instead.

When to use Transparent Gradient Generator vs related tools

Use this when a colour has to dissolve into whatever is behind it — image scrims, fade-outs at the edge of a scrolling panel, soft edges on a coloured surface. Use the text gradient generator when the fill belongs to type rather than to a surface. When the overlay has to carry a colour at both ends, the gradient overlay generator is the two-stop version with an angle, and a fade that has to be judged against real content is what the overlay color generator previews over an image.

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.