CSS Clip Path Generator

Create, preview, and copy CSS clip-path shapes visually in real time.

Drag handles to reshape · Click canvas to add polygon points · Browse 25 presets.

Start Creating Browse Presets
Shape Type
Polygon
Snap to grid (5%)

Drag the handles to reshape · Click canvas to add a point

Generated CSS

      


      

        
Browser Support

        

          
Chrome 55+

          
Firefox 54+

          
Safari 9.1+

          
Edge 79+

        

        
For maximum compatibility, also include -webkit-clip-path alongside clip-path.

      


    


  


  
  

    

      

        
Preset Shapes

        
Click any shape to load it into the editor above.