CSS mask fade generator — fade images and text out at the edges

How to use the CSS mask fade generator

1. Pick the Fade: Bottom edge, Top edge, Right edge, Left edge, Top and bottom, Left and right, or All edges (radial).
2. Set the Fade length from 5% to 100% of the element.
3. Compare the faded sample photo against the white preview background.
4. Copy the .fade rule and add the class to the element you want to fade.

What it does and when to use it

Fading an edge tells people there is more content, or softens an image so it blends into the page. Common uses are a long article preview that fades out above a “Read more” button, a horizontal scrolling row of cards whose left and right edges fade, a hero photo that melts into the background below it, and a soft vignette around a picture.

For a hard-edged shape instead of a soft fade, use the clip-path generator. To cut text to a fixed number of lines with an ellipsis, use the line clamp generator, and for the gradient syntax itself, see the CSS gradient generator.

How it works

The mask is a gradient from opaque #000 to transparent:

• One edge uses linear-gradient(<direction>, #000 <100 − length>%, transparent 100%). With 35%, the first 65% is solid and the last 35% fades.
• Two opposite edges use four stops: transparent at 0%, solid from the fade length to 100% minus it, and transparent again at 100%.
• All edges uses radial-gradient(ellipse at center, #000 <70 − length>%, transparent 70%), so the element is fully hidden beyond 70% of the way out from the centre.

The tool writes the gradient twice, as -webkit-mask-image and mask-image. MDN lists mask-image as Baseline widely available since December 2023.

Worked examples

Default bottom fade:

.fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

A scrolling card row. Left and right, 10%: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%). Cards slide in and out of view softly instead of being cut at the edge.

A soft vignette. All edges, 30%: radial-gradient(ellipse at center, #000 40%, transparent 70%). The centre 40% is untouched and the corners disappear completely.

Limits and tips

• The fade length is a percentage of the element, so a tall element gets a taller fade. For a fixed height, change the stops to px by hand, for example #000 calc(100% - 80px).
• Masks also hide focus rings and shadows near the faded edge. Keep buttons and links out of the fade.