Clip-Path Generator

v1.0.2

Build CSS clip-path shapes — polygon, circle, ellipse, and inset — with presets and a live preview.

Builds CSS clip-path shapes — polygon, circle, ellipse, and inset — with draggable control points, editable coordinate input, and live preview on a sample element.

How to use

→Select a shape type, then drag the control handles to adjust the clip boundary.
→Edit coordinate values directly for precise control.
→Copy the clip-path value and paste it into your CSS.

Shape type

Presets

Polygon points

Comma-separated x% y% pairs, e.g. 50% 0%, 0% 100%, 100% 100%

Preview color

CSS

.element {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}