clip-path
Clips an element to a geometric shape. The clipped area becomes invisible and no longer receives pointer events.
512 effects in the catalog use this property.
Syntax
clip-path: circle(50%) | polygon(...) | inset(...) | path('...');Watch out
For interpolation, the start and end shapes must use the same function and the same number of points. Represent a triangle with four points, two overlapping, before morphing it into a square.
Common values
circle(40% at 50% 50%)- Circle
polygon(50% 0%, 100% 100%, 0% 100%)- Triangle expressed as a list of points
inset(10px round 12px)- Inset clipping with rounded corners
Effects using clip-path
These are working effects from the catalog. Open a tile to inspect the full source.