Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.mask-demo { width: 300px; height: 300px; background-color: #4CAF50; mask-image: radial-gradient(circle, white 50%, transparent 50%); mask-mode: alpha; -webkit-mask-mode: alpha; }The 'mask-mode' CSS property defines how the mask image is applied to an element. It determines whether the mask image should be treated as a source of transparency or as a source of opacity, allowing for creative control over how elements are visually revealed or hidden. This property is particularly useful in graphic design and web animations.
.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.