CSS Tools
CSS Clip-Path Generator
Clip elements to geometric shapes. Pick a preset shape, choose a color, preview it live, and copy the CSS clip-path value.
polygon(50% 0%, 0% 100%, 100% 100%)clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
How clip-path works
clip-path masks an element to a shape. polygon() accepts any number of x,y coordinate pairs (in % or px). circle() andellipse() accept radius and center. inset() clips to a rectangle with optional rounding.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);clip-path: circle(50% at 50% 50%);clip-path: inset(10% round 8px);Frequently asked questions
What is clip-path?
clip-path clips an element to a geometric shape, hiding anything outside the shape. It supports polygon, circle, ellipse, and inset.
Can I animate clip-path?
Yes, clip-path can be transitioned and animated. Both values must use the same shape type and same number of polygon points.
Does clip-path affect layout?
No. clip-path clips the visual rendering but the element still takes up its normal space in the document flow.
What is the difference between polygon and inset?
polygon() defines a custom shape with any number of points. inset() clips to a rectangle with optional rounded corners.