CSS Clipping & Masking

Learn techniques for clipping and masking elements

Introduction to Clipping and Masking

CSS provides powerful features for clipping and masking elements, allowing you to create complex shapes and reveal effects:

Clipping: Defines a visible region of an element using geometric shapes
Masking: Uses images or gradients to define the visibility of an element

Both techniques allow you to create non-rectangular layouts and interesting visual effects.

CSS Clip Path

The clip-path property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Original

No Clipping

Circle

circle(40% at center)

Ellipse

ellipse(40% 30% at center)

Triangle

polygon(50% 0%, 0% 100%, 100% 100%)

Pentagon

polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)

Hexagon

polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)

Star

polygon(50% 0%, 61% 35%, 98% 35%, ...)

Inset

inset(10% 20% 10% 20% round 20px)

/* Basic clip-path shapes */
.clip-circle {
  clip-path: circle(40% at center);
}

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

.clip-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.clip-inset {
  clip-path: inset(10% 20% 10% 20% round 20px);
}
                    

CSS Masking

CSS masking allows you to use images, SVGs, or gradients as masks to create more complex shapes and effects than clip-path. The mask defines which parts of the element are visible.

Original

No Mask

SVG Mask

mask-image: url(svg)

Gradient Mask

linear-gradient(to bottom, black, transparent)

Radial Mask

radial-gradient(circle, black, transparent)

/* CSS mask examples */
.mask-image {
  -webkit-mask-image: url('data:image/svg+xml;utf8,');
  mask-image: url('data:image/svg+xml;utf8,');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.mask-gradient {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}
                    

Note: CSS masking may require vendor prefixes (-webkit-) for better browser compatibility.

Combining Clip Path and Masks

You can combine clip-path and mask properties to create even more complex effects:

Combined

clip-path + mask-image

/* Combining clip-path and mask */
.mask-and-clip {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 70%);
}
                    

Interactive Clipping and Masking

You can animate clip-path and mask properties to create interesting hover effects. Hover over the examples below:

Hover Me

Animated clip-path on hover

Hover Me

Animated mask on hover

/* Hover effects with clip-path and mask */
.hover-clip {
  clip-path: circle(40% at center);
  transition: clip-path 0.5s ease;
}

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

.hover-mask {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  transition: -webkit-mask-image 0.5s ease, mask-image 0.5s ease;
}

.hover-mask:hover {
  -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
}
                    

Text Clipping

You can use background-clip: text to clip a background to the shape of the text:

CLIPPING

/* Text clipping */
.text-clip {
  font-size: 5rem;
  font-weight: bold;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
                    

Practical Examples

Image Frames

Create custom-shaped image frames using clip-path:

Circle Frame

Hexagon Frame

/* Image frames */
.frame-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.frame-hexagon {
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
}
                    

Image Reveal Effect

Create a partial reveal effect using masks:

/* Image reveal effect */
.image-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
                    

SVG Masks

SVG provides even more flexibility for creating complex masks:

SVG Diamond Mask

/* SVG mask */
.svg-mask {
  -webkit-mask-image: url('data:image/svg+xml;utf8,');
  mask-image: url('data:image/svg+xml;utf8,');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
                    

Browser Support and Best Practices

Vendor Prefixes: Use -webkit- prefixes for mask properties to ensure compatibility.
Fallbacks: Provide fallbacks for browsers that don't support clipping and masking.
Performance: Complex masks and clip paths can impact performance. Test on various devices.
Accessibility: Ensure that content remains accessible when using these techniques.

Tip: For complex shapes, consider using SVG instead of CSS clip-path for better browser support.