Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .box { background-color: #4CAF50; color: white; padding: 20px; max-block-size: 150px; width: 200px; border-radius: 8px; overflow: hidden; height: 300px; }The 'max-block-size' CSS property defines the maximum size of an element's block dimension, which is the vertical dimension in a block layout (like a column). This property is particularly useful for controlling the height of elements, ensuring they do not exceed a specified size, while allowing them to shrink if necessary. It is often used in responsive design to maintain layout integrity across different screen sizes.
.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.