CSS Clip-Path Generator
Pick an expanded selection of preset shapes or customize polygon coordinates, preview them live, and copy ready-to-use CSS instantly.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
background-color: #2563eb;
How to Use the CSS Clip-Path Generator
The CSS clip-path property lets you display only a specific region of an element, hiding everything outside of that area to create custom geometric shapes, dynamic photo masks, and unique layouts.
Extended Presets
Instantly apply a wide variety of polygons like triangles, pentagons, hexagons, stars, crosses, and chevrons.
Custom Coordinates
Modify percentage-based polygon point coordinates manually to craft entirely custom vectors and cuts.
Clean Code Export
Copy robust, standards-compliant clip-path statements right into your stylesheets.
Pro Tip: Clip-paths support transitions and animations, making them fantastic for hover effects on buttons, images, and card containers.