Tool Categories

CSS Clip-Path Generator

Generate CSS clip-path properties with visual editor

CSS Clip-Path Generator

Clip-Path Properties
Create custom shapes with CSS clip-path
10%
10%
10%
10%
0px
Live Preview & CSS
See your clip-path shape in action
.clipped-element {
  clip-path: inset(10% 10% 10% 10%);
  -webkit-clip-path: inset(10% 10% 10% 10%);
}
inset(10% 10% 10% 10%)

Use inset() for rectangular shapes with optional rounded corners.

Circle and ellipse use percentages for radius and position.

Polygon coordinates are in percentages (x y, x y, ...).

Include -webkit-clip-path for better browser support.