SVG mask: Alpha Transparency and Soft Edges
SVG mask enables alpha-channel transparency — fade elements, apply soft gradient edges, and create reveal effects using grayscale shapes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How SVG mask Works
A mask uses grayscale values to control opacity: white = fully visible, black = fully hidden.
- <defs><mask id='m'><rect fill='white' width='100' height='100'/><circle fill='black' cx='50' cy='50' r='20'/></mask></defs>
- <image href='photo.jpg' mask='url(#m)'/>
- White areas of the mask: show the masked element at full opacity
- Black areas: fully hide the element
- Grays: partial transparency (50% gray = 50% opacity)
Gradient Fade with mask
The most common mask use case: fade an element out with a gradient.
- <mask id='fade'><rect fill='url(#fadeGrad)' width='200' height='200'/></mask>
- <linearGradient id='fadeGrad'><stop stop-color='white'/><stop offset='100%' stop-color='black'/></linearGradient>
- Apply: <image href='photo.jpg' mask='url(#fade)'/> — fades right to left
- Change direction: modify linearGradient x1/y1/x2/y2 for any fade angle
- Radial fade: use radialGradient — circular vignette effect
mask vs clipPath
Both clip elements, but with different capabilities.
- clipPath: binary — pixels in/out only, no gradual transparency
- mask: alpha-based — supports gradual opacity transitions
- Performance: clipPath is faster (simpler compositing math)
- Use clipPath for: geometric crops, sharp-edge clipping
- Use mask for: gradient fades, soft-edge reveals, complex transparent effects
- mask can contain any SVG including raster images — clipPath shapes only
Frequently Asked Questions
Can I use PNG as an SVG mask?
Yes — <mask><image href='mask.png'/></mask>. The mask uses the PNG's luminance (brightness) values to control opacity. A black PNG area hides; white area reveals. This is powerful for custom organic mask shapes.
How do I create a vignette effect with SVG mask?
Use a radialGradient in a mask: white at center, black at edges. Apply the mask to an image or group. The result is a vignette that fades to transparent at the edges.
Does SVG mask work on text?
Yes — apply mask to <text> elements or SVG groups containing text. You can create gradient-colored text by masking text with a gradient shape.
What is maskContentUnits?
maskContentUnits='objectBoundingBox' makes mask content coordinates relative to the masked element's bounding box (0–1 scale). Default 'userSpaceOnUse' uses the SVG coordinate system.
Can I animate an SVG mask?
Yes — animate the shapes inside the mask with CSS keyframes or GSAP. Animate the gradient stops, circle radius, or path d attribute inside the mask to create animated reveal 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