Masking in CSS
? Masking in CSS
Masking allows you to hide or reveal parts of an element based on an image, gradient, or SVG shape, creating interesting visual effects.
What is CSS Masking?
Masks work like stencils: parts of the element covered by the mask are shown, others are hidden.
You can use images, gradients, or SVG for masks.
Masking works similarly to
clip-pathbut with more flexibility and soft edges.
Core Properties
| Property | Description |
|---|---|
mask-image | Specifies the image or gradient used as a mask |
mask-mode | How mask image is applied (alpha or luminance) |
mask-repeat | Repeat behavior of the mask image |
mask-position | Position of the mask image |
mask-size | Size of the mask image |
mask-composite | How multiple masks combine |
mask-origin | Positioning area for the mask |
mask-clip | Which parts of the mask are visible |
-webkit-mask-* | Vendor-prefixed properties for Safari/WebKit |
Basic Example
.box { width: 200px; height: 200px; background: url('photo.jpg') no-repeat center/cover; mask-image: linear-gradient(to bottom, transparent 0%, black 100%);}The image will gradually appear from transparent (hidden) at top to fully visible (black) at bottom.
Using an Image as Mask
.element { mask-image: url('mask-shape.png'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;}Using SVG Mask
You can use SVG masks via CSS or inline.
Browser Support
Masking works well in modern browsers.
Use
-webkit-mask-*prefixes for better support on Safari and older browsers.
Use Cases
Creating fade effects
Complex shape cropping
Creative image reveals
UI decorations
Want me to help you create a cool mask effect or explain how to combine multiple masks?
