Newly availableUseful when Masks adds emphasis or visual refinement without becoming necessary for understanding content.
Effects Newly available

Masks

The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.

Effects

Overview

The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
mask
120
120
53
15.4
120
15.4
Other
css.properties.mask-clip

The mask-clip CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.
120
120
53
15.4
120
15.4
CSS property
border
Non-standard
1
79
4
18
3.2
content
Non-standard
1
79
4
18
3.2
padding
Non-standard
1
79
4
18
3.2
text
Non-standard
1
79
4
18
3.2
Other
css.properties.mask-composite

The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.
120
120
53
15.4
120
15.4
CSS property
add
120
120
53
15.4
120
15.4
exclude
120
120
53
15.4
120
15.4
intersect
120
120
53
15.4
120
15.4
subtract
120
120
53
15.4
120
15.4
Other
css.properties.mask-image

The mask-image CSS property sets the image that is used as the mask layer for an element, hiding sections of the element on which the masking image is set based on the alpha channel of the mask image and, depending on the mask-mode property value, the luminance of the mask image's colors.
120
120
53
15.4
120
15.4
CSS property
multiple mask images

Multiple mask images
1
18
53
4
18
3.2
svg masks

SVG masks
8
18
53
4
18
3.2
Other
css.properties.mask-mode

The mask-mode CSS property is set on the element being masked. It sets whether the mask reference defined by the mask-image is treated as a luminance or alpha mask.
120
120
53
15.4
120
15.4
CSS property
alpha
120
120
53
15.4
120
15.4
luminance
120
120
53
15.4
120
15.4
match-source
120
120
53
15.4
120
15.4
Other
css.properties.mask-origin

The mask-origin CSS property sets the origin of a mask. This property determines the mask positioning area: the area within which a mask image is positioned. HTML elements can have masks contained within their content border box, padding box, or content box, whereas SVG elements (which don't have the associated CSS layout boxes) can have masks contained…
120
120
53
15.4
120
15.4
CSS property
border
Non-standard
1
79
15.4
18
15.4
content
Non-standard
1
79
15.4
18
15.4
fill-box
120
120
53
120
padding
Non-standard
1
79
15.4
18
15.4
stroke-box
120
120
53
120
view-box
120
120
53
120
Other
css.properties.mask-position

The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
120
120
53
15.4
120
15.4
css.properties.mask-repeat

The mask-repeat CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
120
120
53
15.4
120
15.4
css.properties.mask-size

The mask-size CSS property specifies the sizes of specified mask images. Mask image sizes can be fully or partially constrained to preserve their aspect ratio.
120
120
53
15.4
120
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (1)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 6 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
  • This feature was removed in a later browser version (79)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (79)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (53)
Implementation note
  • Only supports `mask: url(file.svg#mask_id)` or `mask: url(#mask_id)`, where the URL is a reference to an SVG `<mask>` element.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (18)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (2)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when using `-webkit-mask-clip`.
Notes 1 item(s)
Implementation note
  • See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.
Notes 2 item(s)
Implementation note
  • See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (53)
Notes 1 item(s)
Implementation note
  • See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.
Notes 1 item(s)
Implementation note
  • See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.
Notes 1 item(s)
Implementation note
  • See also `-webkit-mask-composite` for a similar non-standard property that uses different keywords.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
  • From version 8, Chrome added support for gradient values. Initially, Chrome supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
  • Initially, Safari supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
  • From version 18, Chrome Android added support for gradient values. Initially, Chrome Android supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
  • Initially, Safari on iOS supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)

Syntax

CSS 
.fade-out {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.shaped {
  mask-image: url("mask-shape.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

.text-reveal {
  mask-image: linear-gradient(to right, black 50%, transparent 50%);
  mask-size: 200% 100%;
  transition: mask-position 0.5s ease;
}

.text-reveal:hover {
  mask-position: -100% 0;
}

Live demo

fade outmask

CSS Masks fade outmask demo.

PreviewFullscreen

horizontalgradient

CSS Masks horizontalgradient demo.

PreviewFullscreen

radialmask

CSS Masks radialmask demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use Masks to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links

Powered by web-features