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.

Combine 2D and 3D CSS transforms visually — translate, rotate, scale, skew and perspective with live preview and transform-origin control.