CSS Mask a Div With Another Div

CSS masking lets you control which part of an element is visible. It works like a stencil. One element defines the shape. Another element is revealed through it.

This technique is useful for modern UI design. It avoids SVGs and heavy images. Browser support is now stable for most use cases.

What Is CSS Masking

CSS masking hides parts of an element using a mask layer. The mask can be an image, gradient, or another element rendered as an image.

Only the opaque part of the mask is visible. Transparent areas are hidden.

The core properties are:

• mask-image
• mask-size
• mask-position
• mask-repeat

Official CSS specification

Basic Example: Mask One Div With Another

Here the second div is used as a mask shape.

<div class="mask-shape"></div>
<div class="masked-box"></div>

<div class="mask-shape"></div>
<div class="masked-box"></div>

.mask-shape {
  width: 300px;
  height: 200px;
  background: linear-gradient(135deg, #000 50%, transparent 50%);
}

.masked-box {
  width: 300px;
  height: 200px;
  background: url('image.jpg') center / cover no-repeat;

  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
}

.mask-shape {
  width: 300px;
  height: 200px;
  background: linear-gradient(135deg, #000 50%, transparent 50%);
}

.masked-box {
  width: 300px;
  height: 200px;
  background: url('image.jpg') center / cover no-repeat;

  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
}

The gradient acts as the mask. Black shows content. Transparent hides it.

Using Another Div as a Mask Source

CSS cannot directly reference another DOM element as a mask. The workaround is simple. Render the first div as an image.

Common approaches:

• Convert the shape to SVG
• Use CSS gradients
• Use mask-image with data: or inline SVG

SVG-based masking is the most flexible.

General CSS documentation

SVG Mask With HTML Div

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

<div class="svg-masked"></div>

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

<div class="svg-masked"></div>

.svg-masked {
  width: 300px;
  height: 200px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  mask: url(#box-mask);
  -webkit-mask: url(#box-mask);
}

.svg-masked {
  width: 300px;
  height: 200px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  mask: url(#box-mask);
  -webkit-mask: url(#box-mask);
}

The SVG defines the mask. The div only shows allowed areas.

Browser Support Notes

• Chrome: Full support
• Edge: Full support
• Safari: Requires -webkit- prefix
• Firefox: Partial support

Always include prefixed properties.

CSS browser support

Real‑World Use Cases

• Image reveal effects
• Hero section overlays
• Card hover animations
• Textured UI blocks

This technique reduces assets. Performance stays high.

Related CSS Guides

What Is Padding in CSS? (Simple Explanation with Examples)

Tailwind CSS with Vite: A Modern Front-End Setup Guide

Scrollbar in CSS: How Modern Websites Customize Scroll Experience

Final Notes

CSS masking is powerful. It is clean and flexible. Use gradients or SVG for best control. Avoid bitmap masks when possible.

For advanced UI effects, masking is better than clip-path in many cases.

Nasim Khan

I’m Nasim Khan, is a Software Engineer focused on building efficient and user-friendly web applications. SHe writes about web development, programming fundamentals, and modern technologies, sharing practical insights for developers and learners.