✂️

CSS Clip-Path Generator

Drag the handles to create custom shapes. Choose from presets or design your own polygon from scratch.

Presets

CSS Code

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

Background

What is clip-path?

The clip-path CSS property allows you to specify a specific region of an element to display, while hiding the rest. It's powerful for creating non-rectangular layouts, unique image shapes, and creative entrance animations.

Browser Support

clip-path is supported in all modern browsers (Chrome, Firefox, Safari, Edge). For maximum compatibility, especially with older Safari versions, you might sometimes see the -webkit- prefix used.