CSS Mask Generator
Generate CSS mask-image effects with gradients, images, and sizing controls — live preview and copy-ready code.
About this tool
CSS mask-image lets you clip an element so only parts of it are visible — like a stencil. Black mask areas hide the element, white areas reveal it, and grays produce partial transparency. This tool builds mask images from gradients (linear, radial, conic) or uploaded images, and packages them with sizing, positioning, and repeat controls.
Example: set a Vignette preset to get a radial gradient mask that fades out the edges — your element smoothly blends into the background. The output reads mask-image: radial-gradient(farthest-side ellipse, #000000 0%, #000000 50%, transparent 100%); mask-size: cover; ...
Useful for hero-image reveals, card-edge blending, animated mask transitions, and replacing clip-path when you need smooth alpha edges instead of sharp vector cuts.
FAQ
What is the difference between mask-image and clip-path? ›
mask-image uses alpha/luminance to control transparency per pixel — it can produce soft, gradual edges (like vignettes or gradient fades). clip-path creates hard geometric or SVG-path boundaries with no partial transparency. Use masks for alpha-based effects and clip-path for sharp cutouts.
Do CSS masks work in all browsers? ›
Mask properties (mask-image, mask-size, etc.) are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit- prefixed versions included in the output cover older Safari and early Chrome versions. mask-image has been shipped cross-browser since ~2022.
Can I use an SVG file as a mask? ›
Yes — upload an SVG and the tool embeds it as a data URI. SVG masks support complex vector shapes with alpha channels. For best results, use a black-and-white SVG: black hides, white reveals. The Luminance Mask option treats the image’s brightness as the mask instead of its alpha channel.
How do I combine masks with gradient backgrounds? ›
Layer them: apply a CSS gradient background to the element, then mask it. Use the <a href="/gradient-css" class="text-accent hover:underline">CSS Gradient Generator</a> to build the background and paste the mask CSS from this tool alongside it. For example, a conic gradient background behind a radial mask creates a spotlight effect — perfect for hover cards and interactive reveals.