Clip Path Generator

Create beautiful CSS clip-path shapes with live preview and multi-layer support

← Back to Home

Layers

Point 1
Point 2
Point 3
Point 4

Code Export

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Examples

Clip path presets

Choose from community presets or start with built-in shapes

Hero Diagonal

Card With Cut Corner

Ticket Stub

Speech Bubble

Hex Badge

Angled Bottom Card

Circle Avatar

Tab Label

Angled Header

Notched Banner