Clip path code generator
to add points
to custom polygon.
to custom polygon.
Custom shape
Round edges
The inset() shape optionally allows values
similar to border-radius for rounded edges.
This new feature may be buggy in
your browser.
clip-path: ;
Round edges
The inset() shape optionally allows values
similar to border-radius for rounded edges.
This new feature may be buggy in
your browser.
Custom shape
Demo Size
×
Demo Background
Show outside clip-path
About Clip Paths
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.