Tailwind Mask Generator

mask-imagehides parts of an element based on a second image — that image can be a PNG, an SVG, or any CSS gradient. Wherever the mask is opaque (or fully white in luminance mode), the underlying element shows through; wherever it's transparent (or black), the element is hidden. It's the cleanest way to fade an image into the background, mask a sticky header against scrolling content, or build a fancy section transition without reaching for SVG <clipPath>.

Gradient masks for fades and reveals

A linear gradient mask from black to transparent is the bread-and-butter "fade out the bottom" effect — perfect for long scrollable lists where you want the last item to dissolve into the background instead of hard-cut at the container edge. A radial mask is how you build a soft spotlight or vignette over an image.

mask-mode: alpha vs luminance

• alphauses the mask's alpha channel directly. This is what most modern browsers default to and what you almost always want when masking with gradients of black-to-transparent.
• luminance treats brighter pixels as visible and darker pixels as hidden. Useful for masking with photos or SVGs where you have grayscale luminance information rather than alpha.
• match-source picks alpha for raster images and luminance for SVGs — Spec default but unevenly supported, so being explicit is safer.

Browser support and prefixes

Modern Chromium, Firefox, and Safari all support mask-image, but Safari historically required the -webkit- prefix and some legacy versions still do. Always emit both the prefixed and unprefixed property — this generator does that for you.