A monotone collection of CSS clipping and masking techniques. Hover over each tile to see it animate.
An inner circle clipped by the outer circle slides up ~30% to reveal text at the bottom.
A clip-path inset animates from closed to open, wiping a dark panel across the tile.
Text masks a greyscale gradient with background-clip: text; the gradient sweeps on hover.
A clip-path polygon morphs from a hexagon to a full square, filling with near-black on hover.