How to use clipping and masking in CSS

CSS is growing more sophisticated all the time, with new tools for us to use. In this article I’ll talk about one new feature: clipping with clip-path and masking.

clip-path and masking are two properties that push the boundaries of the box model a little further than we’ve seen before.

Browser support

Happily, browser support is pretty good for clip-path. For desktop browsers it’s supported as far back as IE9 (although some older browsers need vendor prefixes, as we’ll see). The only real issue is IE Mobile.

For masking, the situation is very different. Right now, it’s only supported by Chrome and Safari, and then you need to use the -webkit- prefix.

Clipping with SVG

We already have a clip property in CSS2, but that property only allows us to clip in rectangular shapes. The big news with clip-path is that we can now clip an image using polygons via SVG.

Let’s assume you have a piece of SVG code like so:

<svg width="0" height="0">
 <clipPath id="clipPolygon">
 <polygon points="99 143,300 293,522 143,302 -5,300 -7">
 </polygon>
 </clipPath>
</svg>

You can simply create your custom shape by using this CSS Path Generator, which will either give you the SVG code for you to place on your page or you can even download the SVG file if you want to use it.

As you can see the SVG code contains a simple ID, this is what we are going to use in the CSS to reference it. To clip a simple image using that SVG we would use the clip-path property and then call the url() function:

img {
 clip-path: url(#clipPolygon);
}

In this case our SVG file only has one polygon so we can also use the shorthand polygon() function and just insert the points we have in our SVG file:

img {
 clip-path: polygon(99px 143px,300px 293px,522px 143px,302px -5px,300px -7px);
}

Both of these examples work in exactly the same way, the only difference is that the second approach does not require any HTML markup.

Using polygon you can also use transitions:

.clip{
-webkit-clip-path: polygon(195px 147px,295px 297px,395px 147px,295px -3px);
transition: 1s all ease;
}
.clip:hover{
-webkit-clip-path: polygon(82px 148px,295px 297px,496px 147px,295px -3px);
}

You can see this in action in this [pen](http://codepen.io/SaraVieira/pen/BCbKc) I created.

Masking

This property is more experimental and consequently, a little harder to test, but it will probably be available for all browsers as soon as people start using it in Chrome or Safari.

Masking works exactly like it does in Photoshop: an image or a gradient is used as a filter for some portions of your image.

To use this we need to use the mask-image property and reference an SVG file, like so:

 img {
 -webkit-mask-image: url("mask.svg");
 }

This will retrieve the SVG file and use it as the mask for the image. If you prefer, you can use an SVG item’s ID:

 img {
 -webkit-mask: url(#masking);
 }