Why does my transparent gradient look grey in the middle?

The CSS keyword transparent equals rgba(0,0,0,0) — transparent black. Gradients interpolate through this, causing a grey or dark mid-point. Fix it by using your actual colour at alpha 0: rgba(R,G,B,0) instead of transparent.

How do I fade an image to transparent with CSS?

Add a pseudo-element overlay with a gradient that fades to transparent: .element::after { content: ""; background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 100%); }

Can I use oklch or hsl colours for transparent gradients?

Yes. Use hsla(H,S%,L%,0) for a transparent stop. Modern CSS also supports oklch(L C H / 0) for colour-space-correct transparency.

How do I create a fade-out mask on a text block?

Use the gradient as a mask-image: mask-image: linear-gradient(to bottom, black 60%, transparent 100%). This makes the element fade to invisible without needing a background overlay.

Can I use transparent gradients on images?

Yes. Apply a transparent gradient as background-image on an absolutely positioned element overlaid on the image, or use mask-image on the img element directly.

Browse tools

Free · Fast · Privacy-first

Transparent CSS Gradient — Fade to Transparent

Transparent gradients are essential for fade-out effects, image overlays, and blending elements into a background. FixTools generates the correct CSS for transparent gradients — including the common pitfall of using transparent directly versus rgba() for colour-accurate fades.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Correct transparent gradient syntax explained

🔒

Avoids the grey banding issue with "transparent" keyword

✨

Generates fade-to-transparent from any colour

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Generate a transparent fade: background: linear-gradient(to bottom, rgba(102, 126, 234, 1) 0%, rgba(102, 126, 234, 0) 100%) — using rgba() instead of transparent avoids grey banding in mid-transition.

How It Works

Step-by-step guide to transparent css gradient — fade to transparent:

1
Choose your starting colour
Decide the opaque colour (the colour the gradient fades from) and note its hex or RGB value.
2
Use rgba() for the transparent end
Convert your colour to rgba() format and set the alpha to 0: rgba(R, G, B, 0). Do not use the transparent keyword as it causes grey banding.
3
Set direction
Choose the fade direction — to bottom for a top-to-transparent fade, to top for a bottom-to-transparent fade, and so on.
4
Copy the CSS
Copy the background: linear-gradient(...) with rgba() values and apply it to your element.