You will use a PNG image as a CSS mask to show only the visible parts of an element, creating shaped, transparent, or partially transparent visuals without editing the original content.
What it is
A CSS mask works like a stencil placed over an element. When the mask is a PNG, the browser usually uses the PNG’s alpha channel to decide how much of the element is visible. Fully opaque mask pixels reveal the element, fully transparent pixels hide it, and semi-transparent pixels partially reveal it.
Related terms include mask-image, mask-repeat, mask-position, mask-size, and mask-mode. A PNG mask is different from simply using a transparent PNG as a background: the mask controls visibility of the element’s content, not just the image itself.
Why it matters
- It lets you create non-rectangular shapes without cutting the original image.
- It supports soft edges and partial transparency, which
clip-pathcannot do alone. - It can mask text, gradients, images, or entire components.
- It keeps visual effects separate from the content, making designs easier to update.
Syntax or steps
- Prepare a PNG with transparency where you want the element hidden.
- Apply a mask to the element using
maskormask-image. - Control placement and scaling with
mask-repeat,mask-position, andmask-size. - Add
-webkit-maskif you need support for older WebKit browsers.
mask: url('mask.png') no-repeat center / contain;Example
.logo {
width: 220px;
height: 120px;
background: linear-gradient(135deg, #ff7a18, #af002d);
mask: url('mask.png') no-repeat center / contain;
-webkit-mask: url('mask.png') no-repeat center / contain;
}Part-by-part
background: linear-gradient(...)gives the element visible content to mask.mask: url('mask.png')sets the PNG as the mask image.no-repeatprevents the mask from tiling across the element.centerpositions the mask in the middle of the element./ containscales the mask so it fits inside the element without cropping.-webkit-maskprovides compatibility for older WebKit-based browsers.
Common mistakes
- Using an image without transparency. A JPEG or fully opaque PNG may reveal the whole element. Fix: export a PNG with an alpha channel.
- Forgetting
mask-sizeormask-repeat. The mask may tile or crop unexpectedly. Fix: useno-repeatand choosecontainorcover. - Masking an empty element. If the element has no background, text, or image, there is nothing to reveal. Fix: give the element visible content.
- Confusing masks with opacity.
opacityfades the whole element uniformly, while a mask can hide or reveal specific areas.
When to use it
| Method | Best for | Limitation |
|---|---|---|
| PNG mask | Soft edges, gradients, partial transparency, complex shapes | Requires an image asset |
clip-path |
Hard-edged shapes like circles, polygons, or responsive cuts | Does not create soft alpha edges by itself |
opacity |
Uniform fading of an entire element | Cannot create shaped visibility |
Practice
Guided exercise: Create a square element with a solid background color and apply a circular PNG mask. Expected result: only the circular area of the square is visible.
Challenge: Use a PNG mask with a soft gradient edge to fade the corners of a text block. Hint: make the mask PNG semi-transparent at the edges and use mask-size: cover.
Quick check
What happens where a PNG mask pixel is 50% transparent?
Answer: The corresponding part of the element is shown at about 50% visibility.
Summary
CSS masking with PNGs uses image transparency to control which parts of an element are visible. It is especially useful for shaped, soft-edged, or partially transparent effects that go beyond simple clipping or uniform opacity.