Free CSS Mask Generator
Create image masks and clipping effects with our free tool. CSS mask properties made easy.
- Image masks
- Gradient masks
- Mask position/size
- Repeat options
- Composite modes
Frequently Asked Questions
How do CSS masks work?
Masks use image luminosity or alpha channel to control element visibility. White/opaque areas show through; black/transparent areas hide content. Gradients create soft fades.
What's the difference between mask and clip-path?
clip-path uses shapes for hard edges. Masks use images/gradients for soft edges, transparency, and complex patterns. Masks offer more creative control.
Do I need webkit prefix for masks?
Yes, use -webkit-mask for Safari. Standard mask property works in Chrome and Firefox. Include both for full browser support.