Skip to main content

Clipping and Masking with CSS (Live Playground)

In this tutorial, we'll explore Clipping and Masking in CSS, which allow you to create visually compelling effects on your web pages.

Clipping with clip-path​

The clip-path property is used to define a clipping region, which determines what part of an element should be visible.

Example:

CSS
.clip {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
Live Playground, Try it Yourself

Basic shapes in clip-path​

You can use basic shapes like circle, ellipse, and rectangle with clip-path.

Example:

CSS
.circle {
  clip-path: circle(50% at 50% 50%);
}
Live Playground, Try it Yourself

Masking with mask-image​

The mask-image property is used to apply an image as a mask to an element. The mask determines the element's visibility based on the image's alpha channel.

Example:

CSS
.mask {
  mask-image: url('mask.png');
}

Additional mask properties​

There are several other properties to control the mask behavior:

  • mask-size: Defines the size of the mask-image.
  • mask-position: Specifies the position of the mask-image.
  • mask-repeat: Defines if and how the mask-image should be repeated.

Example:

CSS
.mask {
  mask-image: url('mask.png');
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
}

Conclusion​

In this tutorial, we learned about Clipping and Masking in CSS. These techniques can help you create visually interesting effects on your web pages, enhancing the design and user experience. Experiment with different shapes, images, and mask properties to create unique visuals for your projects.