Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set Mask Effect with CSS
The CSS mask effect is used to selectively hide parts of an element or apply visual effects by overlaying a mask layer. Modern CSS provides the mask property to create sophisticated masking effects using images, gradients, or shapes.
Syntax
selector {
mask: mask-image mask-mode mask-repeat mask-position / mask-size;
}
Common Mask Properties
| Property | Description |
|---|---|
mask-image |
Specifies the image to use as a mask |
mask-mode |
Sets how the mask layer image is interpreted (alpha, luminance, match-source) |
mask-repeat |
Controls how the mask image is repeated |
mask-position |
Sets the position of the mask layer |
mask-size |
Specifies the size of the mask layer |
Example 1: Basic Mask with Linear Gradient
The following example creates a fade-out effect using a linear gradient mask −
<!DOCTYPE html>
<html>
<head>
<style>
.masked-text {
font-size: 48px;
font-weight: bold;
color: #ff6b6b;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
-webkit-mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
padding: 20px;
text-align: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="masked-text">MASKED TEXT</div>
</div>
</body>
</html>
Large colorful text with a fade-out effect on both sides, creating a spotlight appearance in the center.
Example 2: Circular Mask Effect
This example demonstrates how to create a circular reveal effect using CSS masks −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 300px;
height: 200px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><rect width="300" height="200" fill="%23ff6b6b"/><circle cx="150" cy="100" r="80" fill="%234ecdc4"/><rect x="100" y="50" width="100" height="100" fill="%2345b7d1"/></svg>') no-repeat center;
background-size: cover;
mask: radial-gradient(circle at center, black 60px, transparent 80px);
-webkit-mask: radial-gradient(circle at center, black 60px, transparent 80px);
margin: 20px auto;
border: 2px solid #ddd;
}
</style>
</head>
<body>
<div class="image-container"></div>
<p style="text-align: center;">Circular Mask Applied</p>
</body>
</html>
A colorful geometric pattern visible only through a circular mask in the center, with the surrounding area transparent.
Browser Support
The mask property requires vendor prefixes for WebKit-based browsers. Always include both the standard property and the -webkit- prefixed version for better browser compatibility.
Conclusion
CSS masks provide powerful ways to create visual effects by selectively hiding or revealing parts of elements. Use gradients for smooth transitions and shapes for precise cutouts to enhance your designs.
329 Views
