Syntax#

• Clipping
• clip-path: <clip-source> | [ <basic-shape> || <clip-geometry-box> ] | none
• Masking
• mask-image: [ none | <mask-reference> ]#
• mask-mode: [ <mask-mode> ]#
• mask-repeat: [ <repeat-style ]#
• mask-position: [ <position> ]#
• mask-clip: [ <geometry-box> | no-clip ]#
• mask-origin: [ <geometry-box> ]#
• mask-size: [ <bg-size> ]#
• mask-composite: [ <compositing-operator> ]#
• mask: [ <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||

<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> ]#

Parameters#

Masks:

As at the time of writing (Jul ‘16), Chrome, Safari and Opera support these properties with the -webkit- prefix.

Firefox doesn’t require prefixes but it supports masks only when used with SVG mask elements. For inline SVG mask elements, the syntax is mask: url(#msk) whereas for using mask elements in an external SVG file the syntax is mask: url('yourfilepath/yourfilename.svg#msk'). #msk in both cases refers to the id of the mask element that is being referred to. As indicated in this answer, at present Firefox doesn’t support any parameter other than mask-reference in the mask property.

Internet Explorer (and Edge) does not offer any support for this property as yet.

The mask-mode property is currently not supported by any browser with or without prefixes.

Clip-path:

As at the time writing (Jul ‘16) Chrome, Safari and Opera supports clip-path when the path is created using basic shapes (like circle, polygon) or the url(#clipper) syntax with inline SVG. They don’t support clipping based on shapes that are part of external SVG files. Also, they require the -webkit prefix to be present.

Firefox supports only the url() syntax for clip-path whereas Internet Explorer (and Edge) offer no support.

Clipping (Polygon)

CSS:

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

In the above example, a polygonal clipping path is used to clip the square (200 x 200) element into a triangle shape. The output shape is a triangle because the path starts at (that is, first coordinates are at) 0 0 - which is the top-left corner of the box, then goes to 0 100% - which is bottom-left corner of the box and then finally to 100% 50% which is nothing but the right-middle point of the box. These paths are self closing (that is, the starting point will be the ending point) and so the final shape is that of a triangle.

This can also be used on an element with an image or a gradient as background.

View Example

Output:

Clipping (Circle)

CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

This example shows how to clip a div to a circle. The element is clipped into a circle whose radius is 30% based on the dimensions of the reference box with its center point at the center of the reference box. Here since no <clip-geometry-box> (in other words, reference box) is provided, the border-box of the element will be used as the reference box.

The circle shape needs to have a radius and a center with (x,y) coordinates:

circle(radius at x y)

View Example

Output:

Clipping and Masking: Overview and Difference

Simple mask that fades an image from solid to transparent

CSS

div {
  height: 200px;
  width: 200px;
  background: url(https://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

In the above example there is an element with an image as its background. The mask that is applied on the image (using CSS) makes it look as though it is fading out from left to right.

The masking is achieved by using a linear-gradient that goes from white (on the left) to transparent (on the right) as the mask. As it is an alpha mask, image becomes transparent where the mask is transparent.

Output without the mask:

Output with the mask:

Note: As mentioned in remarks, the above example would work in Chrome, Safari and Opera only when used with the -webkit prefix. This example (with a linear-gradient as mask image) is not yet supported in Firefox.

Using masks to cut a hole in the middle of an image

CSS

div {
  width: 200px;
  height: 200px;
  background: url(https://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

In the above example, a transparent circle is created at the center using radial-gradient and this is then used as a mask to produce the effect of a circle being cut out from the center of an image.

Image without mask:

Image with mask:

Using masks to create images with irregular shapes

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(https://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

In the above example, three linear-gradient images (which when placed in their appropriate positions would cover 100% x 100% of the container’s size) are used as masks to produce a transparent triangular shaped cut at the bottom of the image.

Image without the mask:

Image with the mask: