CP

CSS Clip-Path Generator

Home/Tools/Clip-Path Generator

Create complex shapes and masks with an interactive clip-path editor.

No sign-up neededRuns in your browserProduction-ready CSS

Clip-Path Settings

200px
200px

Edit Points

Point 1
50%
0%
Point 2
100%
50%
Point 3
50%
100%
Point 4
0%
50%

Preview

Clipped Element
Generated CSS, HTML & SVG
.clipped-element {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.