Advanced CSS Clip-Path Generator

Visual Editor: Drag handles to create your shape in real-time.
Shape Presets: Start with common shapes like stars, triangles, and more.
Full Customization: Double-click to add new points and right-click to remove them for full control over polygons.
Live Code Generation: The CSS code is updated instantly as you edit the shape.
Image Upload: Test your clip-path on your own images.

Drag handles to adjust the shape. For polygons, double-click to add a point, right-click a handle to remove it.

Upload Image

• Double-click on the image to add a point.
• Right-click on a handle to remove it.

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

X: 0%, Y: 0%