✂️

CSS Clip-Path Generator

Generate CSS clip-path shapes with live preview

Quick Shapes
CSS Output

            
          

        

        

          
CSS Clip-Path Generator

          
The CSS clip-path property allows you to create various shape clipping effects on HTML elements. Elements outside the defined shape are clipped (hidden). This enables creative designs with non-rectangular shapes for images, dividers, and decorative sections.

          
Clip-Path Types

          
  • polygon(): Define custom polygon shapes with any number of vertices
  • circle(): Circular clipping with radius and center position
  • ellipse(): Elliptical clipping
  • inset(): Rectangular with optional rounded corners