Six ready-made shapes
Circle, ellipse, star, diagonal, radial fade and edge fade cover the most common masking needs out of the box.
CSS Mask Generator
Try circle, star and fade mask-image presets, tune size, position and repeat, and preview the result on a gradient or your own image.
Ready-to-use CSS
Mask any element without touching the artwork
Build soft fades and clean shapes with mask-image, no image editor required.
Full position control
Use the 9-point grid to anchor the mask exactly where you want it, plus a size scale and repeat toggle.
Test on your own image
Upload a photo to see precisely how the mask will crop it before you ship the CSS.
How to use the CSS mask generator
- Choose a shapePick a preset like circle, star or edge fade to start.
- Adjust size and positionScale the mask and anchor it with the 9-point grid; toggle repeat to tile it.
- Copy the CSSSelect Copy CSS to grab the mask-image rule with its vendor prefix.
About CSS mask-image
The CSS mask-image property hides parts of an element based on the alpha channel of a gradient or image, letting you cut soft fades and complex shapes into any box without touching the underlying artwork. Where the mask is fully opaque, the element shows through normally; where the mask is fully transparent, the element is hidden; and anywhere in between produces a partial, gradual reveal — something a hard-edged property like clip-path simply cannot do on its own. Masks accept the same value types as background-image, including CSS gradients, raster images and SVG data URIs, and they support companion properties like mask-size, mask-position and mask-repeat that behave almost identically to their background-* counterparts. Browser support is solid in Chromium and Firefox, but Safari and some older WebKit browsers still require the -webkit-mask-* prefixed versions, so production CSS should always include both forms together, exactly as this generator's output does. Because the effect is computed per pixel from the mask source, very large or animated masks can be more GPU-intensive than a simple background, so it's worth testing performance on the actual elements you plan to mask.
Gradients make soft edges
Use a linear or radial gradient as the mask source whenever you want a gradual fade instead of a hard cutoff.
SVGs make custom shapes
An inline SVG data URI can mask an element into any arbitrary shape, like the star preset in this tool.
Always add the prefix
Ship -webkit-mask-image alongside mask-image so Safari renders the same result.
mask vs clip-path
Reach for clip-path for hard geometric edges, and mask-image when you need gradients or transparency data.
CSS mask generator FAQ
What does CSS mask-image do?
mask-image uses the alpha channel of an image or gradient to control which parts of an element are visible, hiding areas that align with transparent regions of the mask.
Do I need the -webkit-mask-image prefix?
Yes, for broader compatibility. Safari and some older WebKit-based browsers require the -webkit- prefixed versions of mask properties alongside the unprefixed ones.
What is the difference between mask-image and clip-path?
clip-path defines a hard geometric boundary, while mask-image can use soft gradients and image alpha data, making gradual fades and complex shapes possible that clip-path cannot produce alone.
Can I mask my own uploaded image?
Yes. Upload any image and it becomes the masked element's background so you can preview exactly how the mask will crop your artwork.
Is this CSS mask generator free to use?
Yes, it's completely free, requires no account, and the CSS is generated locally in your browser.
Try other CSS design tools
Keep building polished interfaces with these free online CSS generators.