Clipping is binary, every pixel fully shown or fully hidden with a hard edge; masking is graded, letting transparency vary for soft fades and feathered edges. This cheatsheet gathers both on one page, from clip-path shapes and polygons through animated reveals, gradient and radial masks, text clipping, and the fallbacks real projects need, each snippet annotated line by line. Keep it open while you build, or save the image and pin it nearby.
For the full background, read the guide to CSS clipping and masking. To practise, work through the 10 code-along examples.
Download the cheatsheet
Hope this helps.
