CSS Clip-Path Generator

Create custom clip-path shapes with real-time preview

Shape Presets
Choose a starting shape or create custom polygons
Polygon Editor
Drag points to customize your shape

Points (3)

Point 1: (50%, 0%)
Point 2: (0%, 100%)
Point 3: (100%, 100%)
Generated CSS
Copy the CSS code to use in your project
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Shape Editor
Drag the control points to modify your custom polygon
About CSS Clip-Path

Supported Shapes

  • • Circle and ellipse shapes
  • • Custom polygon paths
  • • Preset geometric shapes
  • • Complex multi-point polygons

Browser Support

  • • Modern browsers (95%+ support)
  • • Chrome, Firefox, Safari, Edge
  • • Mobile browsers supported
  • • Progressive enhancement ready

Use Cases

  • • Creative image masking
  • • Unique button shapes
  • • Artistic layout designs
  • • Interactive UI elements
FAQ

How do I use the exported CSS?

Copy the snippet into your CSS or import the downloaded CSS file.

Is mobile supported?

Yes. clip-path works well across modern mobile browsers.

Can I change the number of points?

Yes. Add or remove points to define custom polygons.

Related Tools