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/ff0000/ffffff?text=Mask');
mask-image: url('https://via.placeholder.com/300/ff0000/ffffff?text=Mask');
-webkit-mask-size: 150px 150px;
mask-size: 150px 150px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
}The 'mask-size' property in CSS is used to control the size of the mask applied to an element. It can define the width and height of the mask image, allowing for precise control over how the mask interacts with the element it is applied to. This property is particularly useful for creating complex visual effects and shapes.
.masked-box {
width: 200px;
height: 200px;
background-color: #3498db;
-webkit-mask-image: url('https://via.placeholder.com/100');
mask-image: url('https://via.placeholder.com/100');
mask-repeat: repeat;
mask-size: 50px 50px;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 50px 50px;
}The 'mask-repeat' CSS property specifies how a mask image is repeated. It can take values such as 'repeat', 'no-repeat', 'repeat-x', or 'repeat-y' to control the tiling of the mask image. This allows for creative visual effects by controlling the visibility of an element based on the shape defined by the mask.
.masked-box { width: 300px; height: 200px; background-color: #3498db; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); mask-position: 100px 0; mask-size: 100px 100px; -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); -webkit-mask-position: 100px 0; -webkit-mask-size: 100px 100px; }}The 'mask-position' property in CSS specifies the position of a mask image on an element. It allows you to control where the mask is applied, which can create interesting visual effects by revealing or hiding parts of an element based on the mask's position.
.container { width: 300px; height: 300px; position: relative; overflow: hidden; }
.masked { width: 100%; height: 100%; background-color: lightblue; mask-image: radial-gradient(circle, black 50%, transparent 51%); mask-origin: center; mask-size: 200%; }The 'mask-origin' property in CSS defines the position of the mask image in relation to the element it is applied to. It determines the coordinate system used for the mask, allowing for more control over how the masking effect is rendered. This property is particularly useful when creating complex visual effects with shapes and images.
.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.