Creating Hole Punch Effect in CSS

Using CSS to create a hole punch effect, or "hole punch," can be particularly useful in specific web projects. This attractive effect can be used to showcase content or create unique visual elements. One way to create this effect is by using a mask feature in CSS. By utilizing different methods, this hole effect can be achieved, but here I'll explain a simple and common approach.

To create a hole punch effect in CSS, you should start with elements like a div or square that functions as the mask. By combining this mask and the layers behind it, you can create the desired hole effect.

Another method is to use a combination of shape and mask in CSS. These features allow you to easily combine layers and create unique visuals that would otherwise not be possible.

Furthermore, I'll provide an example code of creating this effect in more detail.

Sample CSS Code for Creating Hole Punch Effect

.container {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #f0f0f0;
  overflow: hidden;
}
.hole {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
}

Line-by-Line Explanation

.container — This class is used for the outer container and defines its dimensions and background color.
width and height — Set the dimensions of the container.
position: relative — Allows the child elements to position themselves relative to this container.
overflow: hidden — Clips any content that overflows the dimensions of this container.
.hole — This class pertains to the div of the hole.
width and height — Specify the dimensions of the hole.
position: absolute — This position is set relative to the nearest positioned ancestor.
transform: translate(-50%, -50%) — Centers the hole by moving it left and up.
border-radius: 50% — Creates a perfect circular shape for the hole.
box-shadow — Creates a shadow effect around the hole to add depth.