CSS Mask Generator
NewGenerate CSS mask-image rules for gradient-based edge fades and vignette effects, with a live preview and cross-browser -webkit- prefix included.
CSS masks (mask-image, with the -webkit- prefix still needed for full Safari support) let you fade an element's edges smoothly using a gradient, unlike clip-path which only cuts hard geometric shapes with no soft transition. This is useful for fading images into their background, creating vignette effects, or softly cropping content edges.
Frequently Asked Questions
How is mask-image different from clip-path?
`clip-path` only cuts hard geometric shapes with a sharp edge, while `mask-image` (especially with a gradient) supports smooth, soft transitions — so you can fade an element's edge gradually into transparency instead of cutting it off abruptly.
Why does the generated CSS include a -webkit- prefixed property?
Safari still requires the `-webkit-mask-image` prefix alongside the unprefixed `mask-image` property for full cross-browser support, so the tool always outputs both to ensure the effect renders consistently everywhere.
What does the "fade starts at" slider control?
It sets the percentage point along the gradient where the fully-opaque (visible) area ends and the fade to transparent begins — a higher percentage means more of the element stays fully visible before fading out.
Can I use this to fade an image into its page background?
Yes — the "fade edge" and "fade top and bottom" / "fade left and right" presets are specifically designed for exactly that effect, commonly used for hero images or banners that blend seamlessly into the surrounding page.
Does the mask affect the element's actual layout size?
No — masking only affects what's visually rendered (making parts transparent); it doesn't change the element's box size, position, or how it participates in the page layout.