CSS Transparent Gradients and Fades
How to create transparent gradients in CSS, fade an element or image to transparent, and avoid the gray transparent-black gradient bug.
5 min read - Updated 2026-06-18
A transparent gradient fades from a color to nothing, which is how you build image overlays, scrim text backgrounds, and soft fade-out edges. The catch: fading to the keyword transparent can produce an ugly gray tint, and there is a clean way around it.
The basic transparent gradient
A linear gradient from a color to a transparent version of the same color gives a smooth fade. Always fade to the rgba/hsl transparent of your color, not the bare transparent keyword.
linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0))
Fade to the same hue at zero alpha for a clean result
Use it as an overlay so text stays readable over images
Stack it above a background-image with multiple backgrounds
Avoid the gray fade bug
The transparent keyword resolves to transparent black (rgba(0,0,0,0)). Fading a colored gradient to transparent therefore drifts through gray. Specify the destination color at zero alpha instead.
Bad: linear-gradient(red, transparent) drifts through gray
Good: linear-gradient(red, rgba(255,0,0,0)) stays pure red
Modern syntax: linear-gradient(red, transparent) is fixed via #rgba too
Prefer explicit zero-alpha color stops for predictable results
Fade an image to transparent
To fade the image itself (not just overlay it), use a mask. A gradient mask makes pixels transparent based on the gradient, which is perfect for soft edges.
mask-image: linear-gradient(to bottom, black, transparent)
Black areas stay visible, transparent areas fade out
Great for soft bottoms on hero images and scroll fades
Include the standard mask-image property for broad support
Release checklist
Fade to a zero-alpha version of the color, not transparent.
Use overlays for text-over-image readability.
Use mask-image to fade the element itself.
Check the fade on light and dark backgrounds.
Frequently asked questions
How do I make a transparent gradient in CSS?
Use a linear or radial gradient that ends at a zero-alpha version of your color, e.g. linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)). Fading to the matching color at zero alpha keeps the fade clean.
Why does my CSS gradient fade to gray?
Because the transparent keyword means transparent black. A gradient from a color to transparent interpolates through gray. Fade to the same color at zero alpha instead - rgba(255,0,0,0) rather than transparent.
How do I fade an image to transparent at the edges?
Use mask-image with a gradient, for example mask-image: linear-gradient(to bottom, black, transparent). The image stays visible where the mask is opaque and fades out where it is transparent.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.