Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.masked-box { width: 300px; height: 300px; background-color: #3498db; -webkit-mask-image: url('https://via.placeholder.com/300/ffffff/000000?text=Mask'); mask-image: url('https://via.placeholder.com/300/ffffff/000000?text=Mask'); mask-size: cover; }The 'mask-image' CSS property allows you to specify an image as a mask for an element, controlling the visibility of the element based on the image's pixel values. Areas of the image that are opaque will show the element, while transparent areas will hide it. This property is particularly useful for creating complex shapes and effects without needing to manipulate the HTML structure.
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
overflow: hidden;
}
.mask1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5);
-webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%);
mask-image: radial-gradient(circle, black 50%, transparent 51%);
}
.mask2 {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 255, 0.5);
-webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%);
mask-image: radial-gradient(circle, black 50%, transparent 51%);
mask-composite: exclude;
}The 'mask-composite' property in CSS allows you to control how multiple mask layers are combined when applied to an element. It enables complex visual effects by determining how the masks interact with each other, such as whether they should be added, subtracted, or intersected. This property is particularly useful for creating intricate designs and effects in web graphics.
.masked-box {
width: 200px;
height: 200px;
background-color: #3498db;
mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
mask-clip: border-box;
mask-size: 100%;
mask-repeat: no-repeat;
-webkit-mask-image: radial-gradient(circle, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
-webkit-mask-clip: border-box;
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
}The 'mask-clip' property in CSS defines the area of the element that is affected by a mask. This property allows you to control how the mask is applied, which can create interesting visual effects by revealing or hiding parts of an element based on the mask's shape and position.
.masked-box {
width: 300px;
height: 200px;
background-color: lightblue;
mask-border-source: linear-gradient(to right, transparent, black);
mask-border-width: 20px;
mask-border-mode: alpha;
mask-border-outset: 5px;
mask-border-repeat: stretch;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
border-radius: 15px;
mask-type: alpha;
}The 'mask-border-width' property in CSS defines the width of the mask border around an element. This property allows you to create a visual effect by controlling how the mask border is applied, effectively allowing for creative designs and shapes by masking parts of the element's border. It is particularly useful for creating complex visual styles without using images.
.masked-border {
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
background-color: #007BFF;
mask-border-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAAFCAIAAAwU3pVAAAAA3NCSVQICAjb4U/gAAAAJcEhZcwAACxMAAAsTAQAAAABYd2UAAAAA
AElFTkSuQmCC');
mask-border-slice: 20;
mask-border-width: 10px;
mask-border-mode: alpha;
mask-type: alpha;
}The 'mask-border-source' property in CSS is used to define an image that will be used as a mask for the border of an element. This allows for creative and complex border designs by applying an image as the border mask, enabling unique visual effects that go beyond standard solid or dashed borders.