SVG Luminance Masks
SVG's mask element uses luminance by default — white reveals, black hides, and gray values in between create soft, partial transparency.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
How Luminance Masking Works
An SVG `<mask>` element's content is interpreted by brightness: white areas fully reveal the masked content, black areas fully hide it, and any gray value in between produces proportional partial transparency — this differs from a simple clip-path, which only supports hard-edged, fully-on-or-off masking.
- White mask regions fully reveal, black fully hides the masked content
- Gray values produce proportional partial transparency, unlike clip-path
- Gradients within a mask create smooth, soft-edged reveal effects
Practical Luminance Mask Applications
A radial gradient mask can create a soft vignette reveal effect, a linear gradient mask can fade an image or shape smoothly at its edges, and combining a mask with a photograph lets you create sophisticated fade transitions entirely in SVG/CSS without needing a raster image editor.
- Radial gradient masks create soft vignette-style reveal effects
- Linear gradient masks fade content smoothly at defined edges
- Photo fade effects achieve entirely in SVG without raster editing
Frequently Asked Questions
What's the difference between mask and clip-path in SVG?
clip-path only supports hard-edged, binary visibility (a pixel is either shown or hidden); mask supports soft, graduated transparency based on luminance values, enabling effects clip-path fundamentally cannot achieve.
Can a luminance mask use a photograph as its source?
Yes — referencing a raster image within the mask element uses that image's brightness values to determine the masked content's transparency, a technique used for sophisticated photo-based reveal and fade effects.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG