This demo allows users to explore CSS masking by adjusting the position, size, and repetition of a mask applied to an image. Users can drag the mask within the bounds of the image or fine-tune its position using range sliders. The demo highlights how CSS mask-image, mask-position, and mask-size properties can create visually striking effects by revealing portions of an underlying image through a custom shape. Whether you’re adjusting a single mask or experimenting with repeating patterns, this tool provides an intuitive way to experiment with CSS masking techniques interactively.

Mask Image:
Mask Position:
Mask Size:
Mask Repeat: