Mask-image - CSS Property

mask-image

Summary of characteristics of the mask-image property

Quick description
Specifies the image or SVG file that will be used as a mask.
Status
Standard
Applies to
HTML: all elements.
SVG: containers except defs, graphic elements, use.
Predefined values
none
Percentages
Not applicable.
Initial value
none
Inherited by default
No.
Animation type
Discrète: during an animation, the mask-image property passes from one value to another without transition.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Masking Module
References (W3C)
Document status: CR (Candidate Recommendation)

Syntax diagram of mask-image.

Mask-image property - Syntax diagramSyntax diagram of the mask-image CSS property. See stylescss.free.fr for details. none none url(url) url(url) image image gradient gradient , ,mask-image:;mask-image:;
Syntax diagram of the mask-image property.
The links in the diagram provide more details about the values.
Download the diagram.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

Description of the mask-image property.

Masking is a relatively recent technique, which involves hiding certain parts of an element based on another element, which is most often an image.

The property mask-image sets the mask or masks to use for hiding the element. The mask can be an image, a gradient, or an SVG file.

Original image, no masking
Original image, no masking.


The mask



The mask.
Image masked with mask-image
Image masked with mask-image.


Refer to the short-hand property mask for more details on the masking technique.

Values for mask-image.

  • mask-image: none;

    No mask is applied to the element, so it’s fully visible.

    TEXT
    No masking.
  • mask-image: url('chemin/fichier'); mask-image: image('chemin/fichier');

    These two functions define the file path and name of the mask, but there are other functions you can use: url() or src(), image(), image-set(), cross-fade(), stripes(), element(). The mask can be a PNG image or an SVG file.

    In the case of a separate SVG file, you can specify an ID for the mask. For example:
    mask-image:url('path/file.svg#id');
    If the SVG code is on the page, you just need to specify the ID.

    TEXT
    Masking with a PNG image.
    TEXT
    Masking with a SCG image.
  • mask-image: linear-gradient(...); mask-image: radial-gradient(...); mask-image: conic-gradient(...);

    In these syntaxes, the mask is specified by a color gradient, defined by one of the gradient functions.

    For more details on the syntax of gradient functions, see the description of these functions or the one that defines a repeating gradient: conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().

    TEXT
    Masking with a linear gradient.
    linear-gradient(black,transparent)
    TEXT
    Masking with a radial gradient.
    radial-gradient(black,transparent)
  • mask-image: url(...), url(...);

    Combination of multiple masks. The different masks are separated by commas. All valid syntaxes for a single mask (image, gradient, SVG file) can be used in this multiple mask syntax. The masks are combined with each other using the mask-composite property.

    For more details and examples, refer to the page on multiple masks.

    TEXT
    Masking with a linear gradient and an image.
    With a composition of masks of the exclude type.
  • mask-image: initial; (none) mask-image: inherit; mask-image: revert; mask-image: revert-layer; mask-image: revert-rule; mask-image: unset;

    Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the mask-image property.

The animation of mask-image can give some nice effects. Some browsers actually apply a fade effect when moving from one mask to another.

Example of animation with mask-image

Browsers compatibility with mask-image.

Masking techniques and the mask-image property are now well supported by current browsers.

Column 1
Support for masking techniques consisting of masking an element with an image or a geometric shape.
Column 2
Support for the mask-image property that defines the image or gradient that will be used as a mask.

Notes:

(1) Requires the -webkit- prefix. Supports the properties mask-image and >mask-box-image but not the other mask-related properties.

(2) Supported with the -webkit- prefix.

1
Using an image
as a mask
2
mask-image
property
Estimated overall support.
97%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

1
2

Opéra Mobile

QQ Browser

1
2

Baidu Browser

1

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

2

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

2

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the mask-image property.

  • CSS Masking Module Level 1

    This specification module describes two ways to partially or completely hide portions of visual elements: masking and clipping.
    Masking involves using another graphic element or an image as a mask.
    Clipping describes the visible region of visual elements. The region can be described using certain SVG graphic elements or simple shapes. Anything outside this region is not rendered.

    Regarding mask-image Introduction of image masking techniques. And first definition of the mask property.
    WD
    November 15, 2012
    Working Draft.
    CR
    August 26, 2014
    Candidate Recommendation.
    PR
    REC

See also, about masking techniques.

The specification that covers everything related to masking is called CSS Masking Module. The property mask-image and the properties below are shown in this module:

Properties:

✗
clip
Langue française
Cuts an element from a rectangle.
clip-path
Defines the visible part of the element, delimited by a geometric shape (rectangle, polygon, etc.).
clip-rule
Defines how to handle hollow shapes in the context of a clipping.
mask
Langue française
A shorthand property that defines the masking parameters: mask dimensions, position, repeat, origin, etc.
mask-border
Short-hand property. Sets all the parameters of a mask for the edges of an element.
⚠
mask-border-mode
Defines according to which parameter the mask should act (luminance, alpha).
⚠
mask-border-outset
Sets the possible offset of the edge mask relative to the element.
⚠
mask-border-repeat
Sets the repeat mode of the mask for the edges of the element.
⚠
mask-border-slice
Defines how the image used as a mask should be partitioned.
⚠
mask-border-source
Specifies the image that will be used as a mask for the edges of the element.
⚠
mask-border-width
Sets the thickness over which the edge mask operates.
mask-clip
Defines the area to be masked.
mask-composite
Defines how masks will be combined when multiple are applied to an element.
Mask-image
Specifies the image or SVG file that will be used as a mask.
mask-mode
Langue française
Sets the masking mode (alpha channel, luminance...)
mask-origin
Langue française
Sets the reference for the positioning of the mask.
mask-position
Langue française
Defines the position of the mask.
mask-position-x
Langue française
Defines the horizontal position of the mask.
mask-position-y
Langue française
Defines the vertical position of the mask.
mask-repeat
Langue française
Sets how the mask repeats when the mask is smaller than the element to be masked.
mask-size
Langue française
Fixe les dimensions du masque.
mask-type
Langue française
Defines which mask parameter is used to hide the element.