CSS Clip-Path Generator

Visually create custom shapes and generate the CSS `clip-path` property. Click on the preview to add points, or drag existing points to edit the shape.

Presets

Start with a predefined shape.

CSS Output

Points

P1:50%, 0%
P2:0%, 100%
P3:100%, 100%

Interactive Preview

A placeholder nature landscape used as a background for the clip-path

What is CSS Clip-Path?

The `clip-path` CSS property creates a clipping region that sets what part of an element is visible. The part that is inside the region is shown, while the part outside is hidden. This powerful feature allows you to create complex shapes beyond the standard rectangle, such as triangles, diamonds, and custom polygons, without needing image editing software.

Frequently Asked Questions