180°
0%
100%
// LIVE PREVIEW
// GENERATED CSS
// create mask-image gradients and shapes visually
Create CSS mask-image gradients and shapes visually. Build fade effects, vignettes, and custom masks with live preview and instant CSS export.
Pick linear, radial, conic gradient, or a predefined shape preset.
Use sliders to fine-tune direction, position, size, and fade stops in real time.
Click "Copy All" to grab the generated mask-image CSS and paste it into your stylesheet.
The CSS mask-image property lets you hide parts of an element using a gradient or image as an alpha channel. Wherever the mask is black (transparent), the element is hidden; where it's white (opaque), the element shows. This tool makes it easy to create those mask values visually without memorizing the syntax.
The mask-image CSS property defines an image used as a mask layer for an element. Where the mask is opaque (white/black alpha channel), the element shows through; where it's transparent, the element is hidden. It accepts gradients, SVG shapes, or PNG images as mask sources.
clip-path clips an element to a geometric shape with hard edges. mask-image can use gradients, meaning you get soft, smooth transparency transitions — perfect for fade effects and vignettes. Both hide parts of an element, but masks offer far more flexibility.
For WebKit-based browsers (Safari, older Chrome), you may need the -webkit-mask-image prefix alongside the standard property. This tool generates both the prefixed and unprefixed versions for maximum compatibility.
All modern browsers support mask-image with good coverage. Chrome, Firefox, Edge, and Safari all support it well. For production use, include -webkit-mask-image as a fallback for older Safari versions. IE11 does not support it at all.
Yes — you can apply mask-image to any HTML element including <img>, <div>, <video>, and more. The mask is applied over the element's rendered output, including its content, background, and borders.
Use a radial gradient mask centered on the area you want visible. Set it to black at the center (visible) and transparent at the edges. For a spotlight effect, try radial-gradient(circle at 50% 50%, black 30%, transparent 70%).
The CSS mask-image property is one of the most powerful and underused layout tools in modern CSS. It works like a stencil — you define an image (or gradient) that acts as a transparency map over your element. Where the mask is fully opaque, your element shows at full opacity. Where the mask is fully transparent, your element disappears. In between, you get smooth partial transparency.
This creates effects that would be impossible or very hacky to achieve with standard CSS alone: images that fade seamlessly into a background color, text that appears to glow out of darkness, decorative shapes cut from full-bleed photos, and spotlight effects that draw the eye to specific UI regions.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of design assets, UI kits, and website templates — worth checking out.
The most common use for mask-image is a linear gradient fade. This technique takes an image or colored element and fades it out along an edge, creating the illusion that it blends smoothly into whatever background is behind it. The CSS looks like this:
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);This makes the element fully visible at the top and fully invisible at the bottom. You can also control the stop positions — for example, black 40%, transparent 80% keeps the top 40% fully opaque, then fades out between 40% and 80%, and the bottom 20% is completely hidden. This is perfect for hero images, card thumbnails, or any element you want to flow seamlessly into the page.
Radial gradient masks create circular or elliptical fade effects from a center point outward (or inward). A classic vignette darkens the edges of a photo while keeping the center bright — the same concept applies here but with transparency:
mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 70%);This creates a spotlight effect: fully visible in the center circle (40% radius) with a smooth fade to fully transparent at 70%. Move the center coordinates to spotlight specific areas — the top-right corner of a card, for instance, or a character's face in a portrait image.
Conic gradients rotate around a center point like a clock, making them ideal for progress indicators, pie-chart cutouts, and sweeping reveal animations. A conic mask can make an element appear to "sweep" in during an animation by gradually expanding the opaque region. Combined with @keyframes, the effect is striking and requires no JavaScript.
Beyond gradients, you can use SVG shapes or clip-path-like polygon masks to cut elements into geometric forms. A star-shaped mask on an avatar image, a diamond-cut product photo, or a hexagonal grid layout — all achievable with mask-image or its close cousin clip-path. While clip-path is better for hard geometric shapes, combining it with a gradient mask gives you the best of both worlds: a shaped element with soft edges.
As of 2026, mask-image is well-supported across all major browsers. However, WebKit-based browsers (particularly older versions of Safari) require the -webkit- prefix. It's best practice to always include both:
-webkit-mask-image: linear-gradient(...);
mask-image: linear-gradient(...);Internet Explorer does not support mask-image at all, so if legacy IE support is a requirement, you'll need a JavaScript fallback or an alternative approach.
CSS masks are composited on the GPU in modern browsers, meaning they're generally performant for static content. However, animating mask properties can be expensive on lower-end devices. If you're animating a mask, test on mobile hardware and consider using will-change: mask-image as a hint to the browser to promote the element to its own layer. For gradient-only masks, the performance impact is minimal.
Like background-image, you can control the size and tiling of a mask with mask-size and mask-repeat. This is useful when using an actual image (like a PNG with an alpha channel) as your mask source, letting you position and scale it independently of the element it's masking. For gradient masks, these properties are less commonly needed but remain available.