CSS Masking

CSS Masking gives you the ability to hide parts of an element. This is usually done using another image or a shape defined in your CSS code.

1. Using `clip-path`

The clip-path property creates a "clipping region" that sets what part of an element should be shown.

.circle {
    clip-path: circle(50%);
}
.pentagon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 
                       18% 100%, 0% 38%);
}

The mask-image property uses an image or a gradient as a mask. Black areas are visible, and transparent areas are hidden.

.masked {
    -webkit-mask-image: radial-gradient(circle, black, transparent);
    mask-image: radial-gradient(circle, black, transparent);
}

Tip: Always use the -webkit- prefix for better browser support when using mask-image. For complex shapes, use an SVG clip-path.

« Previous Lesson Next Lesson »