Masking and clipping

Basic Concepts of Masking and Clipping

Masking and clipping in CSS3 are two distinct visual processing techniques. Masking allows controlling the visible area of an element using images or gradients, while clipping directly crops an element using geometric shapes. Both can achieve similar effects but differ in principles and application scenarios.

Masking uses the mask property, which can apply images, SVGs, or CSS gradients as mask layers. The transparent areas of the mask determine the visibility of the underlying element: fully transparent areas hide the element, fully opaque areas display the element, and semi-transparent areas create transitional effects.

.masked-element {
  width: 300px;
  height: 200px;
  background: linear-gradient(45deg, blue, red);
  mask: url('mask-image.png');
}

Clipping is primarily achieved through the clip-path property, which uses basic shapes or paths to define the display area of an element. Unlike masking, clipping is a binary operation—content inside the path is displayed, while content outside is completely hidden.

.clipped-element {
  clip-path: circle(50% at 50% 50%);
}

Detailed Usage of Masking

CSS masking can be implemented in various ways, each suited to different scenarios. Image masking is the most straightforward method, using the alpha channel of a PNG image to control visibility. This image can be a local resource, an external URL, or dynamically generated via CSS gradients.

.image-mask {
  mask-image: url('star-mask.png');
  mask-mode: alpha; /* Uses the image's alpha channel */
  mask-repeat: no-repeat;
  mask-position: center;
}

Gradient masking does not require external resources and is ideal for creating dynamic effects. Both linear and radial gradients can serve as masks, with the gradient's transparency determining the element's visibility.

.gradient-mask {
  mask-image: linear-gradient(
    to right, 
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

SVG masking offers finer control, especially for complex shapes. SVG's <mask> element can contain arbitrary graphic elements and is referenced via the mask property.

<svg width="0" height="0">
  <mask id="svg-mask">
    <rect width="100%" height="100%" fill="white"/>
    <circle cx="50%" cy="50%" r="40%" fill="black"/>
  </mask>
</svg>

<style>
  .svg-masked {
    mask: url('#svg-mask');
  }
</style>

Masking properties also include several control parameters:

• mask-size: Adjusts the size of the mask image
• mask-origin: Determines the reference box for mask positioning
• mask-composite: Specifies how multiple masks are combined
• mask-type: In SVG masks, specifies whether to use luminance or the alpha channel

Various Forms of Clipping Paths

The clip-path property supports four main types of clipping paths: basic shapes, URL references, polygons, and paths. Basic shapes include simple geometric forms like circles, ellipses, and rectangles.

.circle-clip {
  clip-path: circle(40% at 50% 50%);
}

.ellipse-clip {
  clip-path: ellipse(30% 20% at 50% 50%);
}

.rect-clip {
  clip-path: rect(10%, 80%, 90%, 20%);
}

Polygon clipping allows creating polygons of arbitrary complexity, with each vertex defined by coordinates. This is particularly useful for irregular shapes.

.polygon-clip {
  clip-path: polygon(
    0% 20%, 
    50% 0%, 
    100% 20%, 
    80% 100%, 
    20% 100%
  );
}

SVG path clipping offers the highest precision, using SVG path syntax to define arbitrary curves. This method is ideal when complete control over the clipping edge is required.

.path-clip {
  clip-path: path('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
}

Performance Comparison of Masking and Clipping

Although both masking and clipping can achieve visual cropping effects, their rendering performance and browser support differ. Clipping paths generally perform better because they are based on geometric calculations rather than pixel operations. Modern browsers offer good hardware acceleration support for clip-path, especially with simple shapes.

Masking requires pixel-level calculations, particularly with image masks. Complex gradient masks or large image masks may degrade performance. However, masking excels in enabling semi-transparent transitions and finer alpha control.

Browser support overview:

• clip-path is well-supported in all modern browsers
• Full CSS masking features are better supported in WebKit/Blink browsers
• Firefox offers the most complete support for SVG masks

Dynamic Effects and Animations

Both masking and clipping can be combined with CSS animations or transitions to create dynamic visual effects. Animating clipping paths is particularly suited for shape transformations.

@keyframes clip-animation {
  0% { clip-path: circle(0% at 50% 50%); }
  50% { clip-path: circle(50% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

.animated-clip {
  animation: clip-animation 3s infinite;
}

Mask animations can create fade-in/fade-out or dynamic mask movement effects. Changing mask positions or gradient parameters enables unique transitions.

@keyframes mask-animation {
  0% { mask-position: 0 0; }
  100% { mask-position: 100% 0; }
}

.animated-mask {
  mask: linear-gradient(90deg, transparent, black 50%, transparent);
  mask-size: 200% 100%;
  animation: mask-animation 2s linear infinite;
}

Practical Application Examples

In image displays, masking can create non-rectangular frames. For example, using a heart-shaped mask for user avatars:

.heart-avatar {
  width: 150px;
  height: 150px;
  background-image: url('avatar.jpg');
  mask-image: url('heart-shape.svg');
  mask-size: contain;
}

UI element highlighting can be achieved with clipping path pulse animations:

@keyframes pulse {
  0% { clip-path: circle(10% at center); opacity: 0.7; }
  100% { clip-path: circle(30% at center); opacity: 0; }
}

.highlight {
  position: absolute;
  background: gold;
  animation: pulse 1.5s ease-out infinite;
}

For text effects, gradient masks can create fade-in or partial highlighting:

.text-highlight {
  background: linear-gradient(90deg, red, blue);
  mask-image: linear-gradient(90deg, transparent 20%, white 50%, transparent 80%);
  mask-size: 200% 100%;
}

Advanced Techniques and Considerations

Combining masks using the mask-composite property enables Boolean operations between multiple masks. This property is similar to background-blend-mode, controlling how masks interact.

.composite-mask {
  mask-image: url('mask1.png'), url('mask2.png');
  mask-composite: exclude;
  /* Other values include: add, subtract, intersect, etc. */
}

In responsive design, relative or viewport units can adapt clipping paths to different screen sizes:

.responsive-clip {
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 50px), 
    0 100%
  );
}

For older browsers lacking support, fallback solutions can be provided. The @supports rule detects support and offers alternative styles:

.fallback-box {
  border-radius: 50%; /* Simple circle as fallback for clip-path: circle() */
}

@supports (clip-path: circle()) {
  .fallback-box {
    border-radius: 0;
    clip-path: circle(50%);
  }
}

Integration with Other CSS Features

Masking and clipping can be combined with blend modes (mix-blend-mode) to create more complex visual effects. For example, a clipped element can blend colors with underlying content:

.blend-clip {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  mix-blend-mode: multiply;
}

In 3D transformation scenarios, clipping paths maintain their relative position to the element, while masks transform with the element. This can create interesting perspective effects:

.transformed-clip {
  transform: rotateY(30deg);
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}

When combining with CSS filters (filter), note the application order: filters are typically applied before masking and clipping. This means blur effects will be constrained by the clipping or masking.

.filtered-mask {
  filter: blur(2px);
  mask: linear-gradient(black, transparent);
  /* Blur is applied first, then masked */
}