Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.masked-border {\n width: 300px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: white;\n background-color: #007BFF;\n mask-border: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAF0lEQVR42mP8z8AIAWwJ9hH2gAAAABJRU5ErkJggg==') stretch;\n mask-border-mode: alpha;\n mask-border-width: 10px;\n border: 10px solid transparent;\n}The 'mask-border' property in CSS allows you to create a mask around the border of an element, enabling you to control how the border is displayed. This property can be used to apply images or gradients to the border area, providing a unique visual effect that enhances the design of web elements.
.mask-container { width: 300px; height: 150px; background-color: lightblue; position: relative; -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); -webkit-mask-size: 200px 200px; mask-size: 200px 200px; -webkit-mask-position: center; mask-position: center; }
.masked-content { color: white; font-size: 24px; text-align: center; line-height: 150px; }The CSS 'mask' property allows you to create complex shapes and visual effects by masking parts of an element, making them transparent or visible based on a mask image or gradient. This property can be particularly useful for creating intricate designs and effects without needing additional HTML elements or images.
.container {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
.title {
margin-top: 20px;
font-size: 2em;
color: #333;
}
.description {
font-size: 1.2em;
color: #666;
}
.additional-info {
margin-top: 30px;
font-size: 1em;
color: #444;
}The 'margin-top' property in CSS is used to create space above an element, pushing it downward away from preceding elements. This property can be particularly useful for controlling the vertical spacing in layouts, ensuring that elements are not too close together. By adjusting the 'margin-top' value, you can achieve the desired visual separation between elements.
.container {
display: flex;
}
.box {
background-color: lightblue;
padding: 20px;
margin-right: 20px;
border: 1px solid blue;
}
.box:last-child {
margin-right: 0;
}The 'margin-right' property in CSS is used to create space on the right side of an element. This space can help in positioning elements away from each other, improving the overall layout and readability of the webpage. By adjusting the 'margin-right' value, you can control how much space is added to the right of an element.
.container {
display: flex;
background-color: #f0f0f0;
padding: 20px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
margin-left: 30px;
}The 'margin-left' property in CSS is used to create space on the left side of an element. This space can push the element away from its neighboring elements, affecting the layout and positioning on the page. By adjusting the 'margin-left' value, you can control how far an element is offset from the left edge of its container or adjacent elements.