Clip & Mask

Clip and Mask are CSS techniques for cutting or hiding parts of an element. clip-path lets you create geometric shapes to cut an element, while mask uses an image or gradient as a template to determine which parts are visible.

With clip-path, you can make elements shaped like circles, ellipses, polygons, or other custom shapes. This is very popular for creating visual effects such as circular crops on photos, unique shapes for cards, or reveal animations.

Mask works in a more flexible way because it uses an image or gradient. White areas in the mask remain visible, black areas are hidden. This enables more complex effects such as fade-outs and gradient transparency.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 40px;
    background: #1a1a2e;
    color: white;
  }

  .examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
  }

  .item {
    text-align: center;
  }

  .item p {
    margin-top: 10px;
    font-size: 0.9em;
    color: #aaa;
  }

  img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }

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

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

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

  .star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

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

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

  .inset-box {
    width: 250px;
    height: 150px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    clip-path: inset(10px 20px 30px 40px round 10px);
    margin: 20px auto;
  }

  .custom-shape {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #f093fb, #f5576c);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
    margin: 20px auto;
  }

  .mask-example {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #4ecdc4, #44bd32);
    margin: 20px auto;
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
    mask-image: radial-gradient(circle, black 40%, transparent 70%);
  }

  .mask-fade {
    width: 300px;
    height: 200px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    margin: 20px auto;
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
  }

  .reveal-box {
    width: 300px;
    height: 200px;
    background: url('https://picsum.photos/600/400') center/cover;
    margin: 20px auto;
    clip-path: inset(0 100% 0 0);
    animation: reveal 2s ease forwards;
  }

  @keyframes reveal {
    to {
      clip-path: inset(0 0% 0 0);
    }
  }
</style>
</head>
<body>
  <div class="examples">
    <div class="item">
      <img src="https://picsum.photos/400/400?random=1" alt="Circle" class="circle">
      <p>Circle</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/400?random=2" alt="Ellipse" class="ellipse">
      <p>Ellipse</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/400?random=3" alt="Triangle" class="triangle">
      <p>Triangle</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/400?random=4" alt="Star" class="star">
      <p>Star</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/400?random=5" alt="Hexagon" class="hexagon">
      <p>Hexagon</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/400/400?random=6" alt="Diamond" class="diamond">
      <p>Diamond</p>
    </div>
  </div>

  <h2>Inset with Round</h2>
  <div class="inset-box"></div>

  <h2>Custom Shape</h2>
  <div class="custom-shape"></div>

  <h2>Mask Radial</h2>
  <div class="mask-example"></div>

  <h2>Mask Fade</h2>
  <div class="mask-fade"></div>

  <h2>Reveal Animation</h2>
  <div class="reveal-box"></div>
</body>
</html>

Code Explanation

clip-path: circle(): Makes the element circular. The radius and center position parameters can be set. circle(50% at 50% 50%) means a circle with a 50% radius centered in the element.

clip-path: ellipse(): Makes the element elliptical. It has two radii (horizontal and vertical) that can be set independently.

clip-path: polygon(): Creates a custom shape from coordinate points. Each point is defined as a percentage of the element's width and height. More points = a more complex shape.

clip-path: inset(): Cuts the element in from each side by a certain distance. The round parameter adds a border-radius to the clipped area.

mask-image: Sets an image or gradient as the mask. White areas in the mask are visible, black areas are hidden. You can use a gradient for a fade effect.

-webkit-mask-image: Prefix for compatibility with older browsers. Always include both the prefixed and non-prefixed versions for maximum compatibility.

Reveal animation: Animates clip-path: inset() from hidden to visible. This creates a dramatic reveal effect.

Everyday Use Cases

Profile pictures: Use clip-path: circle(50%) to make circular profile photos without needing border-radius.

Hero section: Create a unique shape for a hero section using polygon, such as a wave shape or angled corners.

Image gallery: Apply various clip-paths to gallery thumbnails for a unique and artistic look.

Loading animation: Use clip-path or mask together with an animation to create an interesting loading effect.

Conclusion

clip-path and mask are powerful tools for manipulating an element's visuals. clip-path is easier to use for standard geometric shapes (circle, ellipse, polygon, inset), while mask is more flexible for gradient and transparency effects. Both can be animated to create interesting visual effects. Always use the -webkit- prefix for broader browser compatibility.