CSS properties - mask-related

revision: March 16, 2024

Content

mask property

CSS masking is an advanced CSS technique that allows you to define a mask shape applied to the image. Anything that appears outside the mask shape is cut out, and the rest is presented.

Anything that's 100% black in the image mask will be displayed entirely, whereas anything that's 100% transparent will be completely hidden, while anything in-between will be partially masked in the image.

Masks share a lot in common with backgrounds in that you can size them, position them, and repeat them and such just like backgrounds.

The "mask" CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points. This property is a shorthand for the following CSS properties:

the "mask-clip property" determines the area which is affected by a mask; the painted content of an element must be restricted to this area.
the "mask-composite property" represents a compositing operation used on the current mask layer with the mask layers below it.
the "mask-image property" sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the "mask-mode" property.
the "mask-mode property" sets whether the mask reference defined by "mask-image" is treated as a luminance or alpha mask.
the "mask-origin property" sets the origin of a mask.
the "mask-position property" sets the initial position, relative to the mask position layer set by "mask-origin", for each defined mask image.
the "mask-repeat 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.
the "mask-size property" specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.

mask-image property

- specifies an image to be used as a mask layer for an element. Linear and radial gradients in CSS can also be used as the mask image.

CSS syntax : mask-image: none | image | url | initial | inherit;

Property values:

none : this is default

image : an image to use as the mask layer

url : an url reference to an image or an SVG <mask> element.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskImage="url('star.svg')"

example: mask-image property - linear gradient masking

Original picture

Masked picture

Code:
            <div id="container">
                <div><p>Original picture</p><img src="../pics/2.jpg" alt="holiday" width="200" 
                height="auto"></div>
                <div><p>Masked picture</p><img id="masked" src="../pics/2.jpg" alt="holiday" width="200" 
                height="auto"></div>
            </div>
            <style>
                #container{display: flex; flex-flow: row nowrap; justify-content:left;}
                #masked{-webkit-mask-image: linear-gradient(to top, transparent 5%, black 75%);
                    mask-image: linear-gradient(to top, transparent 5%, black 75%);}
            </style>
        

example: mask-image property - radial gradient masking

Original picture

Masked picture

Code: 
                <div id="container1">
                    <div><p>Original picture</p><img src="../pics/4.jpg" alt="holiday" width="200" 
                    height="auto"></ div>
                    <div><p>Masked picture</p> img id="masked1" src="../pics/4.jpg" alt="holiday" 
                    width="200" height="auto"></div>
                </div>
                <.style>
                    #container1{display: flex; flex-flow: row nowrap; justify-content:left;}
                    #masked1{-webkit-mask-image: radial-gradient(ellipse 40% 90% at 27% 50%, black 30%, 
                        transparent 70%); mask-image: radial-gradient(ellipse 40% 90% at 27% 50%, black 30%, 
                        transparent 70%);}
                </style>
            

example: mask-image property - using multiple masks

Code:
                <figure class="container2">
                    <img src="../pics/2.jpg" alt="holidays">
                </figure>
                <.style>
                    img { max-width: 100%;  display: block;}  
                    .container2 {max-width: 400px; height: 300px; margin: 1em auto; border:1px solid #ccc;}
                    .container2 img {width: 100%; height: 100%; object-fit: cover; -webkit-mask-image:
                        linear-gradient(45deg, #000000 25%,
                    rgba(0,0,0,0.2) 25%), linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%), 
                    linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%), linear-gradient(-45deg, 
                    rgba(0,0,0,0.2) 75%, #000000 75%); -webkit-mask-size:20px 20px; -webkit-mask-position: 
                    0 0, 0 10px, 10px -10px, -10px 0px; mask-image: linear-gradient(45deg, #000000 25%, 
                    rgba(0,0,0,0.2) 25%), linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%), 
                    linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%), linear-gradient
                    (-45deg, rgba(0,0,0,0.2) 75%, #000000 75%); mask-size:20px 20px;mask-position: 0 0, 0 10px,
                    10px -10px, -10px 0px;}
                </style>

            

mask-mode property

- specifies whether the mask layer image should be treated as a luminance mask or as an alpha mask.

The mask-mode property only works in Firefox!

CSS syntax : mask-mode: match-source | luminance | alpha | initial | inherit;

Property values:

match-source : if the mask-image property is an image (an image URL or a gradient), set mask-mode to alpha. If the mask-image property is an SVG <mask> element, use the <mask> element's mask-type property. This is default.

luminance : use the luminance values of the mask image as the mask values

alpha : use the alpha values of the mask image as the mask values.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskMode="alpha"

mask-origin property

- specifies the origin position (the mask position area) of a mask layer image.

The mask-mode property only works in Firefox!

CSS syntax : mask-origin: border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box | initial | inherit;

Property values:

border-box : the position is relative to the border box. This is default

content-box : the position is relative to the content box

padding-box : the position is relative to the padding box

margin-box : the position is relative to the margin box

fill-box : the position is relative to the object bounding box

stroke-box : the position is relative to the stroke bounding box

view-box : use the nearest SVG viewport as reference box

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskOrigin="padding-box"

example: mask-origin property

Set mask-origin: border-box:

set mask-origin: content-box:

Original image:

Code:

                    <div>
                        <h4>Set mask-origin: border-box:</h4>
                        <div class="mask-1">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>set mask-origin: content-box:</h4>
                        <div class="mask-2">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>Original image:</h4>
                        <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                    </div>
                    <style>
                        .mask-1 {width: 30vw; height: 20vw;background: green; border: 2vw solid red; 
                            padding: 5vw; -webkit-mask-image: url(../pics/search.png); 
                            mask-image: url(../pics/search.png); -webkit-mask-size: 80%; mask-size: 80%; 
                            webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; 
                            -webkit-mask-origin: border-box; mask-origin: border-box; }
                        .mask-2 {width: 30vw; height: 20vw; background: green; border: 2vw solid red; 
                            padding: 5vw;-webkit-mask-image: url(../pics/search.png); 
                            mask-image: url(../pics/search.png); -webkit-mask-size: 80%; mask-size: 80%; 
                            -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
                            -webkit-mask-origin: content-box; mask-origin: content-box;}
                    </style>
                

mask-position property

- sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

CSS syntax : mask-position: value;

Property values:

left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom : if you only specify one keyword, the other value will be "center"

x% y% : the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%

xpos ypos : the first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskPosition="10vw center"

example: mask-position property

Set the position of the mask layer image to center:

Original image:

Code:

                    <div>
                        <h4>Set the position of the mask layer image to center:</h4>
                        <div class="mask-3">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>Original image:</h4>
                        <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                    </div>
                    <style>
                        .mask-3 {-webkit-mask-image: url(../pics/search.png); mask-image: url(../pics/search.png); -webkit-mask-size: 50%; 
                            mask-size: 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; 
                            -webkit-mask-position: center; mask-position: center; }
                        
                    </style>
                

mask-repeat property

- sets if/how a mask image will be repeated. By default, a mask image is repeated both vertically and horizontally.

CSS syntax : mask-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat | initial | inherit;

Property values:

repeat : the mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default

repeat-x : the mask image is repeated only horizontally

repeat-y : the mask image is repeated only vertically

space : the mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images

round : the mask image is repeated and squished or stretched to fill the space (no gaps)

no-repeat : the mask image is not repeated. The image will only be shown once/p>

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskRepeat="no-repeat"

example: mask-repeat property

Set mask-repeat: no-repeat:

Set mask-repeat: repeat:

Original image:

Code:

                    <div>
                        <h4>Set mask-repeat: no-repeat:</h4>
                        <div class="mask-4">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>Set mask-repeat: repeat:</h4>
                        <div class="mask-5">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>Original image:</h4>
                        <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                    </div>
                    <style>
                        .mask-4 {-webkit-mask-image: url(../pics/search.png); mask-image: url(../pics/search.png); -webkit-mask-size: 50%; 
                            mask-size: 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
                        .mask-5 {-webkit-mask-image: url(../pics/search.png); mask-image: url(../pics/search.png); -webkit-mask-size: 50%; 
                            mask-size: 50%; -webkit-mask-repeat: repeat; mask-repeat: repeat;}
                    </style>
                

mask-size property

- specifies the size of the mask layer image.

CSS syntax : mask-size: auto | size | contain | cover | initial | inherit;

Property values:

auto : this is default

size : specifies the size of the mask image in px, em, etc, or in %

contain : scales the mask image in a way that both its width and its height fit inside the container

cover : scales the mask image in a way that both its width and its height cover the container

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maskSize="20vw 20vw"

example: mask-size property

Set the size of the mask layer image to 70%:

Original image:

Code:

                    <div>
                        <h4>Set the size of the mask layer image to 70%:</h4>
                        <div class="mask-6">
                            <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                        </div>
                        <h4>Original image:</h4>
                        <img src="../pics/1.jpg" alt="holiday-1" width="400" height="300">
                    </div>
                    <style>
                        .mask-6 {-webkit-mask-image: url(../pics/search.png); mask-image: url(../pics/search.png); -webkit-mask-size: 70%; 
                            mask-size: 70%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
                    
                    </style>