A CSS mask hides parts of an element using an image's transparency: mask-image: linear-gradient(black, transparent) fades it out toward the bottom. shape-outside makes neighbouring text wrap around a circle or polygon instead of a rectangle. perspective on a parent gives rotated children real depth. Build a mask in the playground and copy it.
| Goal | Property | Edge |
|---|---|---|
| Soft fade or spotlight | mask-image with a gradient | Soft, any opacity |
| Cut-out icon or logo shape | mask-image with an SVG | Follows the image alpha |
| Hard geometric cut | clip-path | Always sharp |
| Text flowing around a shape | shape-outside on a float | Affects layout of text |
| Depth for 3D rotations | perspective on the parent | Not a cut at all |
Updated
Start with the mask playground: pick a fade, a spotlight or a cut-out shape, move it around a sample image and copy the CSS with the -webkit- prefix included. Below it are editable examples for text wrap, clip-path versus mask and a small 3D scene, all running without JavaScript.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 2l14.7 30 33 4.8-23.9 23.3 5.6 32.9L50 77.5 20.5 93l5.7-32.9L2.3 36.8l33-4.8z"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 90S6 62 6 32a22 22 0 0 1 44-6 22 22 0 0 1 44 6c0 30-44 58-44 58z"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M78 15c14 12 20 34 12 52S62 98 42 95 6 78 4 56 14 12 36 5s28-2 42 10z"/></svg>Fully visible down to 50 percent of the height, then a smooth fade to nothing.
<style>
.fade {
height: 140px; border-radius: 12px; padding: 14px; color: #fff;
background: linear-gradient(135deg, #4F98FB, #0f172a);
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
mask-image: linear-gradient(to bottom, black 50%, transparent);
}
</style>
<div class="fade">Release notes, version 4. Faster image uploads, a calmer editor and better keyboard support across every panel.</div>A radial gradient keeps a soft circle visible and hides the rest of the pattern.
<style>
.spot {
height: 150px; border-radius: 12px;
background: repeating-linear-gradient(45deg, #4F98FB 0 12px, #1e3a8a 12px 24px);
-webkit-mask-image: radial-gradient(circle at 35% 45%, black 25%, transparent 60%);
mask-image: radial-gradient(circle at 35% 45%, black 25%, transparent 60%);
}
</style>
<div class="spot"></div>The SVG is inlined as a data URI, so no extra file is needed. mask-size: contain keeps the whole star in the box.
<style>
.star {
width: 140px; height: 140px;
background: conic-gradient(#4F98FB, #f59e0b, #ec4899, #4F98FB);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l14.7 30 33 4.8-23.9 23.3 5.6 32.9L50 77.5 20.5 93l5.7-32.9L2.3 36.8l33-4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l14.7 30 33 4.8-23.9 23.3 5.6 32.9L50 77.5 20.5 93l5.7-32.9L2.3 36.8l33-4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
</style>
<div class="star"></div>The icon file provides only the shape; background-color sets the colour, so one SVG serves every theme and hover state.
.icon {
width: 24px; height: 24px;
background-color: currentColor;
-webkit-mask: url("/icons/cart.svg") center / contain no-repeat;
mask: url("/icons/cart.svg") center / contain no-repeat;
}The float pushes text with shape-outside and looks round thanks to border-radius. shape-margin adds breathing room.
<style>
.orb { float: left; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #93c5fd, #1d4ed8);
shape-outside: circle(50%); shape-margin: 10px; margin-right: 6px }
p { margin: 0; font-size: 14px; line-height: 1.55 }
</style>
<div class="orb"></div>
<p>Our pottery studio fires every piece twice, once to harden the clay and once to set the glaze. Classes run on weekday evenings and Saturday mornings, with clay, tools and firing included in the price. Bring an apron and clothes you do not mind getting dusty. Finished pieces are ready to collect about two weeks after your class.</p>The same polygon drives both the visible cut (clip-path) and the text flow (shape-outside).
<style>
.wedge { float: left; width: 160px; height: 170px; background: #0f172a;
clip-path: polygon(0 0, 100% 0, 40% 100%, 0 100%);
shape-outside: polygon(0 0, 100% 0, 40% 100%, 0 100%) }
p { margin: 0; font-size: 14px; line-height: 1.55 }
</style>
<div class="wedge"></div>
<p>Each line of this paragraph starts a little further left than the line above it, because the float narrows toward the bottom. It is a simple way to make an editorial layout feel less boxy without any images or scripts. Resize the result frame by editing the width to see the lines reflow.</p>| clip-path | mask-image | |
|---|---|---|
| Input | Basic shape or SVG <clipPath> | Any image: gradient, PNG, SVG |
| Edges | Hard | Soft or hard |
| Partial transparency | No | Yes |
| Animatable | Shapes with the same point count | mask-position and mask-size |
Left uses clip-path: circle(). Right uses a radial gradient mask with a feathered edge, which clip-path cannot do.
<style>
.row { display: flex; gap: 24px; flex-wrap: wrap }
.tile { width: 140px; height: 140px; background: linear-gradient(135deg, #f59e0b, #ec4899) }
.clip { clip-path: circle(45%) }
.mask { -webkit-mask-image: radial-gradient(circle, black 35%, transparent 50%);
mask-image: radial-gradient(circle, black 35%, transparent 50%) }
</style>
<div class="row"><div class="tile clip"></div><div class="tile mask"></div></div>perspective on the stage and preserve-3d on the group put the three cards in one space; translateZ pushes each to a different depth.
<style>
.stage { perspective: 700px; height: 200px; display: grid; place-items: center }
.group { transform-style: preserve-3d; transform: rotateX(55deg) rotateZ(-30deg); position: relative; width: 140px; height: 100px }
.layer { position: absolute; inset: 0; border-radius: 10px; opacity: .9 }
.l1 { background: #0f172a; transform: translateZ(0) }
.l2 { background: #4F98FB; transform: translateZ(30px) }
.l3 { background: #f59e0b; transform: translateZ(60px) }
</style>
<div class="stage"><div class="group"><div class="layer l1"></div><div class="layer l2"></div><div class="layer l3"></div></div></div>| Property | Default | Purpose |
|---|---|---|
| mask-image | none | The image or gradient used as the mask |
| mask-mode | match-source | Use alpha or luminance of the mask |
| mask-size | auto | Size of the mask, like background-size |
| mask-position | 0% 0% | Where the mask sits |
| mask-repeat | repeat | Tiling of the mask image |
| mask-origin | border-box | Box the position is measured from |
| mask-clip | border-box | Area the mask affects |
| mask-composite | add | How layered masks combine: add, subtract, intersect, exclude |
The browser lays the mask image over the element and reads its transparency pixel by pixel. Where the mask is fully opaque the element shows normally, where it is fully transparent the element disappears, and partial transparency gives partial visibility.
Because gradients are images, any linear, radial or conic gradient is a ready-made mask. Several masks can be layered with commas and combined with mask-composite, for example to punch a hole out of a fade.
shape-outside accepts basic shapes such as circle(), ellipse(), polygon() and inset(), a box keyword such as margin-box, or an image whose transparent pixels define the shape. Only inline content flowing beside the float follows the curve.
The float still occupies its rectangular box for its own painting. To make a photo look round as well as push text round, add clip-path: circle(50%) or border-radius: 50% to the same element.
clip-path draws a geometric outline and everything outside it is cut off with a hard edge. mask-image uses an image or gradient, so edges can be soft and partially transparent. Clip paths are simpler for polygons and circles; masks are the choice for fades, feathered spotlights and logo-shaped cut-outs.
The unprefixed mask properties became Baseline in late 2023. Adding the -webkit- version alongside costs nothing and keeps the effect working for visitors on older Safari and Chromium releases.
Check three things: the element must be floated, it needs a width and height, and if you use an image as the shape it must be same-origin or served with CORS headers. Text also only wraps on the side away from the float.
Put a mask on the scroll container: mask-image: linear-gradient(to bottom, black 85%, transparent). The last lines fade out as a hint that more content follows, and the mask scrolls with the box rather than with the content.
It is the distance from the viewer to the z = 0 plane. Around 600px to 1200px looks natural for cards. Smaller values such as 300px exaggerate the depth and distort the near edges strongly.
Related: Clip-path generator, CSS transforms, CSS gradient generator, SVG optimizer, Modern CSS features.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.