Hole in overlay with CSS
Categories:
Creating a 'Hole' in an Overlay with CSS

Learn how to create a transparent 'hole' or cutout within a semi-transparent overlay using advanced CSS techniques like clip-path
, mask-image
, and mix-blend-mode
.
Creating an overlay that covers the entire screen or a specific element is a common UI pattern. Often, you might want to highlight a particular area beneath the overlay by making a 'hole' or a transparent cutout in it. This article explores several modern CSS techniques to achieve this effect, moving beyond simple z-index
manipulations to create truly interactive and visually appealing overlays.
Understanding the Challenge
The core challenge lies in making a portion of a semi-transparent overlay completely transparent, revealing the content underneath, while the rest of the overlay maintains its opacity. Traditional methods often involve multiple overlapping elements or complex JavaScript, but CSS offers more elegant and performant solutions. We'll focus on methods that allow for dynamic shapes and positions for these 'holes'.
flowchart TD A[Overlay Requirement] --> B{Highlight Specific Area?} B -- Yes --> C[Create 'Hole' in Overlay] C --> D{Choose CSS Technique} D -- `clip-path` --> E[Shape-based Cutout] D -- `mask-image` --> F[Image/Gradient Mask] D -- `mix-blend-mode` --> G[Blending with Background] B -- No --> H[Standard Overlay]
Decision flow for choosing a CSS technique to create a hole in an overlay.
Method 1: Using clip-path
for Geometric Holes
The clip-path
CSS property allows you to create complex shapes by clipping an element to a basic shape (like circle()
, ellipse()
, polygon()
, inset()
) or an SVG path. This is ideal for creating geometric holes in your overlay. The overlay itself will be a single element, and the clip-path
will define the visible area, effectively creating a transparent cutout.
.overlay-clip-path {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/* Create a circular hole in the center */
clip-path: circle(100px at center);
/* Invert the clip-path to make the hole transparent */
/* This requires a slightly different approach or multiple elements */
/* For a true 'hole', we need to combine shapes or use mask-image */
}
/* A more direct approach for a 'hole' with clip-path involves two elements */
.overlay-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
}
.hole-element {
width: 200px;
height: 200px;
background-color: transparent; /* This element is the 'hole' */
border-radius: 50%; /* Example: circular hole */
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); /* Creates the overlay around it */
}
CSS for creating a circular hole using box-shadow
trick with a transparent element.
clip-path
can define complex shapes, creating a 'hole' directly with it often requires inverting the path or using a combination of shapes. The box-shadow
trick shown above is a clever way to achieve a 'hole' effect with a single element, where the shadow creates the overlay and the element itself is the transparent area.Method 2: Using mask-image
for Flexible Cutouts
The mask-image
property offers even greater flexibility, allowing you to use images, SVG, or CSS gradients as masks. The transparent parts of the mask image will create the 'hole' in your overlay. This is particularly powerful for non-geometric shapes or when you want to use a custom graphic as your cutout.
.overlay-mask-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/* Create a circular mask using a radial gradient */
mask-image: radial-gradient(circle at center, transparent 100px, black 101px);
-webkit-mask-image: radial-gradient(circle at center, transparent 100px, black 101px);
}
/* Example with a custom SVG mask */
.overlay-svg-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" fill="black"/><circle cx="50" cy="50" r="20" fill="transparent"/></svg>');
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" fill="black"/><circle cx="50" cy="50" r="20" fill="transparent"/></svg>');
}
CSS using mask-image
with a radial gradient and an inline SVG for a circular hole.
mask-image
, the transparency of the mask determines the transparency of the element. A fully transparent area in the mask will create a fully transparent 'hole' in the overlay. Black areas in the mask typically mean the element is fully visible, while transparent areas mean it's fully hidden.Method 3: Using mix-blend-mode
for Dynamic Effects
The mix-blend-mode
property specifies how an element's content should blend with the content of its direct parent and the element's background. By setting the overlay's mix-blend-mode
to multiply
or screen
and placing a white element (or black, depending on the blend mode) where the hole should be, you can achieve interesting cutout effects. This method is particularly good for interactive highlights.
body {
background-image: url('https://via.placeholder.com/800x600/FF0000/FFFFFF?text=Background'); /* Example background */
background-size: cover;
min-height: 100vh;
}
.overlay-blend-mode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* The overlay color */
mix-blend-mode: multiply; /* Blends with the background */
}
.hole-target {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: white; /* This white area will 'cut out' the overlay */
border-radius: 50%;
/* Ensure this element is above the overlay in the DOM or has a higher z-index */
z-index: 10; /* Example z-index */
}
/* HTML Structure:
<div class="overlay-blend-mode"></div>
<div class="hole-target"></div>
*/
CSS for creating a hole using mix-blend-mode: multiply
with a white 'hole-target' element.
mix-blend-mode
approach can be highly dependent on the background content and the specific blend mode chosen. It might not always produce a perfectly transparent 'hole' but rather a blended effect. Test thoroughly across different backgrounds and browsers.Choosing the Right Method
Each method has its strengths and weaknesses:
clip-path
: Best for simple, geometric cutouts where you need precise control over the shape. Can be less intuitive for creating a 'hole' directly without helper elements.mask-image
: Most flexible for complex, non-geometric, or image-based cutouts. Excellent for dynamic shapes using gradients or SVG. Requires good browser support for masking.mix-blend-mode
: Great for interactive effects and when the 'hole' needs to dynamically react to the background. Can be less predictable for pure transparency and might require specific background colors for optimal results.
Consider browser compatibility and the complexity of the desired 'hole' shape when making your choice.