Clip-Path Maker

Create complex CSS clip-path shapes visually. Drag points, choose presets and export polygon, circle, ellipse or inset clip-paths.

Shape Library

Shape EditorDouble-click to add / remove points

Preview

Points (3)

150%, 0%

2100%, 100%

30%, 100%

Show Tailwind

CSS

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

Tailwind CSS

<div class="[clip-path:polygon(50%_0%,_100%_100%,_0%_100%)]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

Create CSS box shadows with real-time preview. Fine-tune every parameter.

Generate glassmorphism effects with backdrop-blur, opacity and saturation controls.

Create stunning text effects — gradient text, stroke, neon glow, long shadow, retro 3D and emboss.

Combine CSS filters visually — blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia and invert with real-time preview.

Transform screenshots into stunning visuals with browser frames, device mockups, gradient backgrounds and export in multiple formats.

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.