CSS Clip-Path Generator

Shape Type

Presets

Visual Editor

Drag the red points to adjust the polygon shape. Click the canvas to add new points.

Generated CSS

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

Preview

About CSS Clip-Path

The CSS clip-path property creates a clipping region that sets what part of an element should be shown. Parts inside the region are shown; parts outside are hidden.

Supported shapes: polygon() for custom shapes, circle() for circles, ellipse() for ovals, and inset() for rectangles with optional rounded corners.

Browser support: clip-path is supported in all modern browsers. For older browsers, consider using the -webkit-clip-path prefix.