ImageToSVG

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.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

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

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

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