CSS clip-path maker Sponsored by CSS Scan
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: ;
This ad keeps this site running.
Consider whitelisting this page.
Thank you for visiting either way!

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

Check out the current browser support for the clip-path property on Can I Use.

CSS Scan

Clippy is sponsored by CSS Scan, an awesome browser extension for checking, copying and editing CSS.

Check out CSS Scan now

Browser Support caniuse.com

Brought to you by Bennett Feely

Find this project on Github.

Want a list of the name of every polygon? Check out my new site, Copy Paste List.