Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.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.
.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.