All three can hide part of an element, but they solve genuinely different problems.
overflow: hidden
The simplest of the three — clips content to the element's own rectangular box, hiding anything that spills outside it. No custom shape involved; it only ever produces a plain rectangle (or a rounded rectangle, if combined with border-radius). Use this when you just need to prevent content from visually overflowing its container.
clip-path
Cuts an element into a crisp, precisely defined geometric shape — polygons, circles, ellipses, or SVG paths. The edge is always sharp and well-defined; there's no soft fade at the boundary. Use this for angular, geometric shapes — diagonal sections, hexagons, custom-shaped buttons.
mask
Uses a separate image or gradient to determine which parts of an element are visible, and crucially, supports partial transparency — a soft gradient mask can fade an element gradually from fully visible to fully invisible, something clip-path's hard-edged shapes can't express. Use this for gradient fades, soft vignettes, or masking with a complex image-based shape rather than a geometric one.
A Quick Decision Guide
- Just need to prevent overflow, no custom shape:
overflow: hidden. - Need a sharp, geometric custom shape:
clip-path. - Need a soft gradient fade or an image-based mask:
mask.
They Can Be Combined
These properties aren't mutually exclusive — an element could use clip-path for its overall geometric silhouette while a child element inside uses overflow: hidden to contain its own content, or a design might use mask for a soft fade at one edge while clip-path handles a sharp diagonal cut elsewhere in the same layout.
Ready to try clip-path for your shape?
Open Clip-Path Maker