CSS Clip-Path Generator

Clip-Path Properties

Create custom shapes with CSS clip-path

Shape Type

Top: 10%

Right: 10%

Bottom: 10%

Left: 10%

Border Radius: 0px

Live Preview & CSS

See your clip-path shape in action

.clipped-element {
  clip-path: inset(10% 10% 10% 10%);
  
  /* For older browsers */
  -webkit-clip-path: inset(10% 10% 10% 10%);
}

inset(10% 10% 10% 10%)

Clip-Path Tips:

• 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