Clip-path generator
Pick from ready-made CSS clip-path shapes — triangle, hexagon, star, message and more — preview and copy the code.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);About this clip-path generator
Pick from a set of ready-made CSS clip-path shapes — triangle, trapezoid,
hexagon, star, chevron, speech bubble and more — see each applied to a live box,
and copy the declaration.
How clipping works
clip-path hides everything outside the shape you define (a polygon, circle or
inset). It’s GPU-accelerated, doesn’t change layout, and works on any element —
including images and videos — which makes it perfect for angular section
dividers, badges and decorative cut-outs.
FAQ
Does clip-path affect layout?
No — it only changes what is visible. The element still occupies its full box for layout, and only the visible area receives clicks.
Can I animate clip-path?
Yes, between shapes that have the same number of points — the browser interpolates the coordinates, so transitions and keyframes work.