CSS Masking: Using Stencils for Web Elements
CSS masking is like a stencil for your elements. You provide a shape, and only the parts of the element under the stencil's cutout are visible. Use it for non-rectangular shapes, like text cutouts.
Why it exists
Before CSS masking, creating non-rectangular shapes for web elements was cumbersome. Developers had to use pre-edited transparent images or complex SVG workarounds to achieve effects like text cutouts or custom frames. Masking brings this capability directly into CSS, offering a flexible way to control an element's visibility without altering the source assets.
The mental model
Think of CSS masking as using a digital stencil on an element. You have your content (an image, a div), and you place a mask layer over it. This mask, which can be an image or a gradient, determines what gets shown. The opaque or bright parts of the stencil let the content show through, while the transparent or dark parts hide it.
How it works
The mask property is a shorthand for a suite of properties like mask-image, mask-size, and mask-repeat. You typically define a mask-image using a URL to a PNG or SVG, or by generating a CSS gradient. The browser then uses this layer to determine the visibility of the element it's applied to. By default (mask-mode: alpha), the mask's transparency is used: opaque areas reveal the element, and transparent areas hide it. You can also set mask-mode: luminance to use the mask's brightness instead, where lighter parts reveal and darker parts hide. You can combine multiple masks and control their position, size, and repetition, similar to how background properties work.
When to use it
Use masking for creating visually complex UIs that go beyond simple boxes and circles. It is ideal for effects like having text "cut out" of an image, applying an intricate frame to a user's avatar, or creating components with unique, non-geometric boundaries. It allows you to separate the content from its shape, making designs more flexible.
When not to use it
For simple geometric clipping, mask is often overkill. If you just need to crop an element to a basic shape like a circle, ellipse, or a simple polygon, the clip-path property is more direct and performant. Use clip-path for simple shapes and reserve mask for more complex, image-based, or gradient-based visibility effects.
One canonical example
A classic use is applying a shape from an SVG file. For instance, mask: url("masks.svg#star"); would take an element, like a div with a background image, and only show the parts of that div that fall within the bounds of the "star" shape defined inside the masks.svg file. Everything outside the star shape would be hidden.
Interview question
When is CSS masking generally preferred over the `clip-path` property?
- a.For applying intricate, image- or gradient-driven visibility effects to an element.Correct
- b.When the goal is to reduce the file size of an image by cropping it directly in CSS.
- c.To define a simple, geometric shape like a circle or polygon for an element.
- d.To ensure an element's content remains fully visible regardless of its container's size.
Why? this is the answer
The card explicitly states that `clip-path` is for simple geometric clipping, while `mask` is reserved for "more complex, image-based, or gradient-based visibility effects." Masking controls visibility with a stencil, not for file size reduction or ensuring full visibility.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles