Generator

CSS Clip Path Generator

Create CSS clip-path shapes visually with interactive controls.

Shape

Preview

Vertices: 5

x: 50%y: 5%

x: 92.8%y: 36.1%

x: 76.5%y: 86.4%

x: 23.5%y: 86.4%

x: 7.2%y: 36.1%

Snap (0, 25, 50, 75, 100%)

Units:

AnimateBrowser Prefix (-webkit-)

CSS Output

-webkit-clip-path: polygon(50% 5%, 92.8% 36.1%, 76.5% 86.4%, 23.5% 86.4%, 7.2% 36.1%);
clip-path: polygon(50% 5%, 92.8% 36.1%, 76.5% 86.4%, 23.5% 86.4%, 7.2% 36.1%);

About CSS Clip Path Generator

The CSS clip-path property lets you clip an element to a custom shape. This tool lets you design clip-path shapes visually and instantly generates the CSS code.

Browse all Generator tools

How to Use

Select a shape type, adjust the controls to customize the clip path, then copy the generated CSS and paste it into your stylesheet.

Common Use Cases

Creating unique image masks and hero section shapes
Building diagonal dividers between page sections
Designing custom button shapes
Creating polygon-shaped avatars or thumbnails
Animating clip-path transitions for creative effects

How to Use CSS Clip Path Generator Take a break and play free browser games

Reviews

Read & write tool reviews→

Discuss & review this tool→