CSS Clip Path Generator with 16 Shape Presets

Create custom shapes with CSS clip-path. 16 built-in presets: triangle, star, pentagon, hexagon, arrow, cross, diamond, chevron, and more.

Click a preset to apply it. Enter custom polygon coordinates. Live preview.

Clip Path Generator

CSS visual toolkit (13 generators):

• Gradient
• Animation
• Filter
• Transition
• Box Shadow
• Text Gradient
• Border Radius
• Flexbox
• Grid

Full toolkit (390+ tools): devtools-site-delta.vercel.app