Skip to main content
DevTools24

CSS Clip Path Generator

Create CSS clip-path shapes visually. Choose from polygons, circles, ellipses, and inset shapes with presets.

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

CSS clip-path Property - Detalles técnicos

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts inside the region are shown, while those outside are hidden. Use shapes like polygon, circle, ellipse, or inset to create unique visual effects.

Alternativa de línea de comandos

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

Referencia

Ver especificación oficial