How does mask-image fade an edge without cropping the element?

mask-image uses a gradient's alpha channel to control an element's opacity pixel by pixel — black areas of the gradient stay fully visible, transparent areas become fully invisible, and anything in between blends smoothly. Unlike clip-path, which cuts a hard edge, a mask gradient fades it gradually.

Why does the CSS include both -webkit-mask-image and mask-image?

mask-image is well supported in current browsers, but Safari has historically required the -webkit- prefixed property for reliable rendering. Including both covers the widest range of browsers without any extra JavaScript.

How is the 'fade all edges' mode different from the single-edge modes?

The single-edge and opposite-edge modes use a linear-gradient along one axis. Fade all edges instead uses a radial-gradient from the center outward, so all four sides — and the corners — fade together into a soft vignette rather than fading independently.

Can I use this on a background image instead of a foreground image?

mask-image only affects the element it's applied to, including its background. Apply the same mask-image/-webkit-mask-image rules to a div with a background-image instead of an , and the background will fade the same way.

Does this tool upload my image?

This generator doesn't take an image upload at all — it demonstrates the mask on a sample gradient block so you can copy the CSS and apply it to your own image or element locally, with nothing sent to a server.

CSS MASK / FADE EDGE GENERATOR

Fade out the edges of an image or block with a mask-image gradient and copy the CSS.

Fade size: 30%

.fade-edge {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

How to fade an element's edges

1
Choose which edge (or edges) should fade out.
2
Adjust the fade size on the live preview.
3
Copy the generated CSS.
4
Apply the .fade-edge class to any image or block element.

Questions

How does mask-image fade an edge without cropping the element?: mask-image uses a gradient's alpha channel to control an element's opacity pixel by pixel — black areas of the gradient stay fully visible, transparent areas become fully invisible, and anything in between blends smoothly. Unlike clip-path, which cuts a hard edge, a mask gradient fades it gradually.
Why does the CSS include both -webkit-mask-image and mask-image?: mask-image is well supported in current browsers, but Safari has historically required the -webkit- prefixed property for reliable rendering. Including both covers the widest range of browsers without any extra JavaScript.
How is the 'fade all edges' mode different from the single-edge modes?: The single-edge and opposite-edge modes use a linear-gradient along one axis. Fade all edges instead uses a radial-gradient from the center outward, so all four sides — and the corners — fade together into a soft vignette rather than fading independently.
Can I use this on a background image instead of a foreground image?: mask-image only affects the element it's applied to, including its background. Apply the same mask-image/-webkit-mask-image rules to a div with a background-image instead of an <img>, and the background will fade the same way.
Does this tool upload my image?: This generator doesn't take an image upload at all — it demonstrates the mask on a sample gradient block so you can copy the CSS and apply it to your own image or element locally, with nothing sent to a server.