CSS clip-path maker
to add points
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.

-webkit-clip-path: ; clip-path: ;

No support

Sorry but the CSS clip-path property does not support basic shapes in your browser. Please try opening this page in another browser.

Browser Support caniuse.com

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

Prefix

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.

Browser Support caniuse.com

Brought to you by Bennett Feely

Find this project on Github.
This demo uses Draggabilly by Dave Desandro.