CSS Masking
Hide and reveal parts of elements with CSS masks
🎭 What is CSS Masking?
CSS masking allows you to hide portions of an element by masking or clipping it to specific shapes or images.
/* Basic mask example */
.masked-element {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
mask: radial-gradient(circle, black 50%, transparent 50%);
}
Output:
Types of CSS Masking
Radial Masks
Create circular or elliptical masks
mask: radial-gradient(
circle,
black 60%,
transparent 60%
);Linear Masks
Create gradient-based masks
mask: linear-gradient(
to right,
black 0%,
transparent 100%
);Image Masks
Use images as masks
mask: url('mask.png');
mask-repeat: no-repeat;
mask-size: cover;Clip Path
Clip elements to shapes
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);🔹 Basic Mask Examples
Basic CSS masking reveals portions of elements using gradient, image, or SVG-based masks for creative visual effects. The mask-image property accepts linear gradients, radial gradients, or image URLs to control element visibility. For example, mask-image: linear-gradient(to right, black, transparent) creates a gradual fade-out effect. These techniques enable image transitions, creative text reveals, and non-rectangular content boundaries without altering HTML structure. Basic masks improve performance by utilizing CSS instead of multiple image assets, while maintaining crisp edges across different screen resolutions. Practical applications include animated content reveals, decorative text treatments, and visually distinctive section dividers.
/* Circle mask */
.circle-mask {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
mask: radial-gradient(circle, black 50%, transparent 50%);
}
/* Fade out mask */
.fade-mask {
width: 200px;
height: 100px;
background: linear-gradient(to right, #667eea, #764ba2);
mask: linear-gradient(to right, black 0%, transparent 100%);
}
/* Diamond clip */
.diamond-clip {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #667eea, #764ba2);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Output:
🔹 Advanced Masking Techniques
Advanced CSS masking techniques utilize SVG masks, multiple mask layers, and mask composition for complex visual effects. Developers can combine multiple mask sources using the mask-composite property, create animated masks with CSS transitions, and reference external SVG <mask> elements for intricate patterns. These advanced approaches enable sophisticated design implementations like shape-based content reveals, animated loading sequences, and interactive visualization effects. Performance optimizations include using CSS-based masks over image assets, implementing hardware acceleration through will-change: mask, and ensuring fallback designs for browsers with limited mask support. These techniques push creative boundaries while maintaining accessibility standards.
/* Multiple masks */
.multi-mask {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #f093fb, #f5576c);
mask:
radial-gradient(circle at 25% 25%, black 30%, transparent 30%),
radial-gradient(circle at 75% 75%, black 30%, transparent 30%);
}
/* Animated mask */
.animated-mask {
width: 180px;
height: 180px;
background: linear-gradient(45deg, #4facfe, #00f2fe);
mask: radial-gradient(circle, black 40%, transparent 40%);
transition: mask 0.3s ease;
}
.animated-mask:hover {
mask: radial-gradient(circle, black 70%, transparent 70%);
}
/* Text mask effect */
.text-mask {
width: 300px;
height: 100px;
background: linear-gradient(45deg, #fa709a, #fee140);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.35em' font-size='40' font-weight='bold'%3EMASK%3C/text%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}