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

Firefox 47+ supports clip-path behind a flag. (Updated: August 2016)

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

Firefox 47+ supports clip-path behind a flag. (Updated: August 2016)

Brought to you by Bennett Feely

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