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, BMP, 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