A Sneak-Peek Under the Hood of the CSS Masking Module

By Vipul Patel

The CSS masking module, http://www.w3.org/TR/css-masking , describes ways in which portions of visual elements can be partially or fully hidden.

One of the ways is by masking. Masking involves drawing the element and its children into a buffer and then compositing the buffer into the element's parent. The transparency of the buffer before the compositing stage is influenced by luminance and alpha.

The other way is clipping which involves describing the visible region of visual elements. Things outside this region are ignored and not rendered.

CSS Masking module attempts to "spec"-ify the rendering of structured documents on various form factors (like screen, paper, speech)

Now, let us look at the various CSS properties laid out in the masking module.



This property specifies a basic shape to create a clipping path. It can also reference a <clipPath> element.

The valid values can be "valid URL for clip", <basic-shape> (Defined in CSS Shapes module, or <geometry-box>

A Geometry box can be one of:

  • fill-box - It uses the object bounding box as reference box
  • stroke-box - It uses the stroke bounding box as reference box
  • view-box - It uses the nearest SVG viewport as reference box.


Example 1 - Example

.target { clip-path: polygon(polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,

122px 57px, 184px 73px); }


Example 2 Example of clipPath reference

.target { clip-path: url("#myclip");}

<clipPath id="myclip">

<polygon points="15,99 30,87 65,99 85,55 122,57 184,104"/>





This property specifies the algorithm to be used to determine where a given point is inside the clipping region.

The valid values for this property are nonzero and evenodd. Clip-rule does not apply for <basic-shape>,

Example 3

<g clip-rule="nonzero">

<clipPath id="myclip">

<path d="..." clip-rule="evenodd" />


<rect clip-path="url(#MyClip)" ... />





This property is used to set the mask layer image of an element. The value can be image or a URL to a mask reference. It can also be 'none'.


Example 4

body { mask-image: linear-gradient(black 0%, transparent 100%) }


p { mask-image: none } // Value as none


div { mask-image: url(resources.svg#mask2) } // example with URL mask reference



This property is used to indicate whether the mask reference needs to be treated as luminance mask or alpha mask.

Example of mask mode


rect {

mask-image: url(#SVGMask); // Assuming mask id "SVMask" is defined

mask-mode: luminance;





This property specifies how mask layer images are tiled after they are sized and positioned.


This property specifies how mask layer images are tiled after they are sized and positioned.

Example showing mask-repeat and mask-position properties

body {
  mask-image: url("mylogo.png");
  mask-position: 75% 75%;
  mask-repeat: no-repeat;



In this article, we learned about various CSS properties related to masking module. I hope you have found the information useful.

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508





Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date