<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The <mask> SVG element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.

Example

html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

Attributes

height

This attribute defines the height of the masking area. Value type: <length> ; Default value: 120%; Animatable: yes

maskContentUnits

This attribute defines the coordinate system for the contents of the <mask>. Value type: userSpaceOnUse|objectBoundingBox ; Default value: userSpaceOnUse; Animatable: yes

maskUnits

This attribute defines the coordinate system for attributes x, y, width and height on the <mask>. Value type: userSpaceOnUse|objectBoundingBox ; Default value: objectBoundingBox; Animatable: yes

x

This attribute defines the x-axis coordinate of the top-left corner of the masking area. Value type: <coordinate> ; Default value: -10%; Animatable: yes

y

This attribute defines the y-axis coordinate of the top-left corner of the masking area. Value type: <coordinate> ; Default value: -10%; Animatable: yes

width

This attribute defines the width of the masking area. Value type: <length> ; Default value: 120%; Animatable: yes

Usage context

Specifications

Specification
CSS Masking Module Level 1
# MaskElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask
height
maskContentUnits
maskUnits
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also