mask · Properties · CSS

The mask CSS property is shorthand for mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-composite, and mask-mode.

Syntax

CSS

mask: value;

JS

object.style.mask = "value";

Values

<'mask'> = <mask-layer>#

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

<mask-reference> = none | <image> | <mask-source>

none

A transparent black image layer.

<image> = <url> | <gradient>

<url> = url( <string> <url-modifier>* )

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<mask-source> = <url>

<url> = url( <string> <url-modifier>* )

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

auto

Automatically specified by the user agent.

cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

contain

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

repeat-x

The image is repeated in the horizontal direction as often as needed to cover the background painting area.

repeat-y

The image is repeated in the vertical direction as often as needed to cover the background painting area.

repeat

The image is repeated in the horizontal and vertical direction as often as needed to cover the background painting area.

space

The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.

round

The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.

no-repeat

The image is placed once and not repeated in this direction.

<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

<shape-box> = <box> | margin-box

<box> = border-box | padding-box | content-box

border-box

Area within the border box.

padding-box

Area within the padding box.

content-box

Area within the content box.

margin-box

Area within the margin box.

fill-box

Uses the object bounding box as a reference box.

stroke-box

Uses the stroke bounding box as a reference box.

view-box

Uses the nearest SVG viewport as a reference box.

no-clip

The painted content is not restricted (not clipped).

<compositing-operator> = add | subtract | intersect | exclude

add

The source is placed over the destination.

subtract

The source is placed, where it falls outside of the destination.

intersect

The parts of source that overlap the destination, replace the destination.

exclude

The non-overlapping regions of source and destination are combined.

<masking-mode> = alpha | luminance | match-source

alpha

Indicates the alpha values of the mask layer image should be used as the mask values.

luminance

Indicates the luminance values of the mask layer image should be used as the mask values.

match-source

The value specified by the referenced mask element's mask-type property must be used.

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            border-style: solid;
            border-width: 10px;
            margin: 10px;
            mask-image: url(/assets/svg/HappyFace.svg);
            mask-origin: margin-box;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(value)" value="border-box">initial</button>
    <button onmouseover="myfunction(innerHTML)">border-box</button>
    <button onmouseover="myfunction(innerHTML)">content-box</button>
    <button onmouseover="myfunction(innerHTML)">fill-box</button>
    <button onmouseover="myfunction(innerHTML)">margin-box</button>
    <button onmouseover="myfunction(innerHTML)">no-clip</button>
    <button onmouseover="myfunction(innerHTML)">padding-box</button>
    <button onmouseover="myfunction(innerHTML)">stroke-box</button>
    <button onmouseover="myfunction(innerHTML)">view-box</button>
    <div>
        <svg height="100" width="100">
            <rect fill="red" height="90" stroke="blue" stroke-width="10" width="90" x="5" y="5"/>
        </svg>
        <span>mask-clip</span>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) border-box " + myparameter;
        }
    </script>
</body>
</html>

10 · mask-clip · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            border-style: solid;
            border-width: 10px;
            margin: 10px;
            mask-image: url(/assets/svg/HappyFace.svg);
            mask-origin: margin-box;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button value="border-box">initial</button>
    <button>border-box</button>
    <button>content-box</button>
    <button>fill-box</button>
    <button>margin-box</button>
    <button>no-clip</button>
    <button>padding-box</button>
    <button>stroke-box</button>
    <button>view-box</button>
    <div>
        <svg height="100" width="100">
            <rect fill="red" height="90" stroke="blue" stroke-width="10" width="90" x="5" y="5"/>
        </svg>
        <span>mask-clip</span>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) border-box " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

11 · mask-composite · add

12 · mask-composite · exclude

13 · mask-composite · intersect

14 · mask-composite · subtract

15 · mask-composite · JS · Inline

16 · mask-composite · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
            mask-image: url(/assets/svg/HappyFace.svg), url(/assets/svg/Star.svg);
        }
    </style>
</head>
<body>
    <button value="add">initial</button>
    <button>add</button>
    <button>exclude</button>
    <button>intersect</button>
    <button>subtract</button>
    <div>mask</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter + ", url(/assets/svg/Star.svg)";
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

17 · mask-image · image · gradient · linear-gradient

18 · mask-image · image · gradient · radial-gradient

19 · mask-image · image · url

20 · mask-image · none

21 · mask-image · JS · Inline

22 · mask-image · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
        }
    </style>
</head>
<body>
    <button value="none">initial</button>
    <button value="linear-gradient(black, transparent)">linear-gradient</button>
    <button value="radial-gradient(black, transparent)">radial-gradient</button>
    <button value="url(/assets/svg/HappyFace.svg)">url</button>
    <button>none</button>
    <div>mask-image</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

23 · mask-mode · alpha

24 · mask-mode · luminance

25 · mask-mode · match-source

26 · mask-mode · JS · Inline

27 · mask-mode · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            mask-image: url(#myid);
        }
        mask
        {
            mask-type: alpha;
        }
    </style>
</head>
<body>
    <button value="match-source">initial</button>
    <button>alpha</button>
    <button>luminance</button>
    <button>match-source</button>
    <div>mask-mode</div>
    <svg>
        <mask id="myid">
            <rect fill="red" height="100" width="100"/>
        </mask>
    </svg>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(#myid) " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

28 · mask-origin · border-box

29 · mask-origin · content-box

30 · mask-origin · fill-box

31 · mask-origin · margin-box

32 · mask-origin · padding-box

33 · mask-origin · stroke-box

34 · mask-origin · view-box

35 · mask-origin · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            border-style: solid;
            border-width: 10px;
            margin: 10px;
            mask-image: url(/assets/svg/HappyFace.svg);
            padding: 10px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(value)" value="border-box">initial</button>
    <button onmouseover="myfunction(innerHTML)">border-box</button>
    <button onmouseover="myfunction(innerHTML)">content-box</button>
    <button onmouseover="myfunction(innerHTML)">fill-box</button>
    <button onmouseover="myfunction(innerHTML)">margin-box</button>
    <button onmouseover="myfunction(innerHTML)">padding-box</button>
    <button onmouseover="myfunction(innerHTML)">stroke-box</button>
    <button onmouseover="myfunction(innerHTML)">view-box</button>
    <div>
        <svg height="100" width="100">
            <rect fill="red" height="90" stroke="blue" stroke-width="10" width="90" x="5" y="5"/>
        </svg>
        <span>mask-origin</span>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter;
        }
    </script>
</body>
</html>

36 · mask-origin · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            border-style: solid;
            border-width: 10px;
            margin: 10px;
            mask-image: url(/assets/svg/HappyFace.svg);
            padding: 10px;
        }
    </style>
</head>
<body>
    <button value="border-box">initial</button>
    <button>border-box</button>
    <button>content-box</button>
    <button>fill-box</button>
    <button>margin-box</button>
    <button>padding-box</button>
    <button>stroke-box</button>
    <button>view-box</button>
    <div>
        <svg height="100" width="100">
            <rect fill="red" height="90" stroke="blue" stroke-width="10" width="90" x="5" y="5"/>
        </svg>
        <span>mask-origin</span>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

37 · mask-position · bottom

38 · mask-position · center

39 · mask-position · left

40 · mask-position · length

41 · mask-position · percentage

42 · mask-position · right

43 · mask-position · top

44 · mask-position · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
            mask-image: url(/assets/svg/HappyFace.svg);
            mask-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(value)" value="0% 0%">initial</button>
    <button onmouseover="myfunction(innerHTML)">bottom</button>
    <button onmouseover="myfunction(innerHTML)">center</button>
    <button onmouseover="myfunction(innerHTML)">left</button>
    <button onmouseover="myfunction(value)" value="100px 100px">length</button>
    <button onmouseover="myfunction(value)" value="100% 100%">position</button>
    <button onmouseover="myfunction(innerHTML)">right</button>
    <button onmouseover="myfunction(innerHTML)">top</button>
    <div>mask-position</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter + " no-repeat";
        }
    </script>
</body>
</html>

45 · mask-position · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
            mask-image: url(/assets/svg/HappyFace.svg);
            mask-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <button value="0% 0%">initial</button>
    <button>bottom</button>
    <button>center</button>
    <button>left</button>
    <button value="100px 100px">length</button>
    <button value="100% 100%">position</button>
    <button>right</button>
    <button>top</button>
    <div>mask-position</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter + " no-repeat";
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

46 · mask-repeat · no-repeat

47 · mask-repeat · repeat

48 · mask-repeat · repeat-x

49 · mask-repeat · repeat-y

50 · mask-repeat · round

51 · mask-repeat · space

52 · mask-repeat · JS · Inline

53 · mask-repeat · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
            mask-image: url(/assets/svg/HappyFace.svg);
        }
    </style>
</head>
<body>
    <button value="repeat">initial</button>
    <button>no-repeat</button>
    <button>repeat</button>
    <button>repeat-x</button>
    <button>repeat-y</button>
    <button>round</button>
    <button>space</button>
    <div>mask-repeat</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

54 · mask-size · auto

55 · mask-size · contain

56 · mask-size · cover

57 · mask-size · length

58 · mask-size · percentage

59 · mask-size · JS · Inline

60 · mask-size · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: yellow;
            height: calc(100vh - 37px);
            mask-image: url(/assets/svg/HappyFace.svg);
        }
    </style>
</head>
<body>
    <button value="auto">initial</button>
    <button>auto</button>
    <button>contain</button>
    <button>cover</button>
    <button value="100px 50px">length</button>
    <button value="100% 50%">percentage</button>
    <div>mask-size</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.mask = "url(/assets/svg/HappyFace.svg) 0% 0% / " + myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>