CSS Mask Generator

Masks control element visibility from alpha/luminance. Use clip-path instead when a hard geometric cut is sufficient.

Mask preset

Reveal edge (%)

Circle size (%)

Diagonal angle

Preview

Opaque mask areas remain visible; transparent areas hide the element.

MASK

Generated CSS—

Masking and clipping are different

CSS masks use alpha or luminance to create partial visibility. For a simple hard geometric edge, clip-path can be simpler and cheaper.

Mask results depend on the element content beneath the mask. Verify the final effect over the actual page background and interaction states.