Use the CSS Mask Generator to build mask-image CSS with shapes, gradients, images, SVGs, or text — then copy the code straight into your stylesheet. No signup, no downloads.
How It Works
The tool builds a mask-image value from whichever source you pick — a shape, a gradient, an uploaded image, custom SVG markup, or typed text — and pairs it with the matching mask-mode, mask-repeat, mask-position, and mask-size properties. Every property ships with both the unprefixed and -webkit- prefixed version, since Safari still requires the prefix for mask-image to render.
Two mask modes control how the source is read:
- Alpha mode uses only the transparency of the mask source — anything opaque shows through, anything transparent is hidden. This is the default for shapes, gradients, and SVGs, since those are generated with a transparent background.
- Luminance mode uses brightness instead — light pixels show through, dark pixels are hidden. This is the default for uploaded images and text, since photos and typography don’t have a built-in transparent background to read from.
Uploaded images are converted to a self-contained base64 data URI directly in your browser, so the final CSS works without hosting a separate image file.
When to Use a CSS Mask
- Reveal an image through a shape or text — a common effect for hero sections and photography-led landing pages, without needing a separate cropped image asset for every variation
- Fade an image or block edge — vignette and gradient-fade effects (alpha masking) are lighter-weight than layering a semi-transparent overlay div
- Mask an SVG icon or logo — apply an image or gradient fill inside an icon shape using SVG as the mask source, useful for duotone or photo-fill icon treatments
- WordPress theme customization — masks applied via a Custom HTML block or theme’s Additional CSS panel work the same way as any other CSS, no plugin required
Frequently Asked Questions
What’s the difference between CSS mask and clip-path?clip-path cuts an element to a hard-edged shape with no gradient or partial transparency — the edge is always fully on or off. mask-image supports gradients and images, so it can produce soft, faded, or partially transparent edges that clip-path cannot.
Does CSS mask-image work in Safari?
Yes, but Safari requires the -webkit-mask-image prefix (along with -webkit-mask-mode, -webkit-mask-repeat, etc.) — it does not fully support the unprefixed properties on their own. This tool outputs both versions automatically so the CSS works across Chrome, Firefox, Safari, and Edge.
Can I use an image as a CSS mask?
Yes — upload any PNG, JPG, or SVG in Image mode. The tool reads its brightness (luminance mode by default): lighter areas of the image stay visible, darker areas mask the element out.
What is alpha mode vs luminance mode in CSS masks?
Alpha mode reads only the transparency channel of the mask source, ignoring color and brightness. Luminance mode reads brightness instead, treating white/light areas as visible and black/dark areas as hidden. Use alpha for masks with true transparency (SVG shapes, gradients); use luminance for photos or flat-color text masks.
How do I mask text with a background image in CSS?
Switch to Text mode, type your text, and the tool generates an SVG mask from it. Applied with mask-image to an element with a background image or gradient, the text becomes a window showing that background through the letter shapes — a common “photo-fill text” effect.
Can I use an SVG shape as a mask?
Yes — SVG mode accepts any SVG markup, either a shape element (like <circle> or <path>) or a full <svg> block. It’s encoded into the CSS automatically, so no separate SVG file needs to be hosted.
Do I need a plugin to use CSS masks in WordPress?
No. The generated CSS can go directly into a block’s Additional CSS panel, a Custom HTML block, or your theme’s custom CSS field — masking is a native CSS feature and works the same in WordPress as anywhere else.