CSS Effects
Clipping & Masking
Control visible regions, alpha masks, and the contour around which inline content flows. The examples distinguish visible clipping, alpha masking, basic shapes, SVG paths, and shape-outside for text wrapping.
Clipping draws only the pixels inside a path. Masking uses alpha or luminance to vary visibility. CSS shapes can separately change the contour around which inline content flows.
These operations affect painting in different ways and should be chosen accordingly. A clip has a hard boundary, while a gradient mask can fade content gradually. Neither automatically changes the element’s layout box, and shape-outside affects surrounding inline flow only when used with a float. This topic also connects with CSS Filters and Layered Backgrounds.
Clip an element to a shape
Example
css
.portrait {
clip-path: circle(45% at 50% 42%);
}
.tag {
clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%,
calc(100% - 1rem) 100%, 0 100%);
}clip-path changes what is painted and hit-tested, but it does not change the space the element occupies in layout.
Mask using an image or gradient
Example
css
.fade {
mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.icon {
background: currentColor;
mask: url("/icons/star.svg") center / contain no-repeat;
}Wrap text around a contour
Example
css
.figure {
float: inline-start;
shape-outside: circle(50%);
clip-path: circle(50%);
margin-inline-end: 1.5rem;
}Shape and Mask Properties
| Property | Purpose | Example |
|---|---|---|
| clip-path | Clips painting to a basic shape or path. | clip-path: circle(45%) |
| mask-image | Uses an image's alpha or luminance as a mask. | mask-image: linear-gradient(...) |
| mask-size | Sets the rendered size of mask layers. | mask-size: cover |
| shape-outside | Defines the contour around a float. | shape-outside: circle(50%) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clipping & Masking example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.portrait {
clip-path: circle(45% at 50% 42%);
}
.tag {
clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%,
calc(100% - 1rem) 100%, 0 100%);
}
.fade {
mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.icon {
background: currentColor;
mask: url("/icons/star.svg") center / contain no-repeat;
}
.figure {
float: inline-start;
shape-outside: circle(50%);
clip-path: circle(50%);
margin-inline-end: 1.5rem;
}
</style>
</head>
<body>
<main><div class="portrait" style="width:180px;height:180px;background:linear-gradient(135deg,#06b6d4,#7c3aed)"></div><p class="tag">Clipped tag shape</p><div class="icon" style="width:80px;height:80px;color:#d97706"></div></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| clip-path | 55 | 79 | 3.5 | 9.1 |
| mask shorthand, unprefixed | 120 | 120 | 53 | 15.4 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Complex shapes can obscure content at zoomed text sizes. Test clipping and wrapping with long text, narrow widths, and browser zoom.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Clipping changes the visible region, masking controls alpha, and shapes influence text flow.
Treat clipped and masked artwork as enhancement unless the visible shape is essential to understanding the content. Test pointer interaction, zoom, forced colors, and fallback rendering, especially when a complex path cuts close to text or controls.