CSS Clip Path Generator

Create custom CSS clip-path shapes with live preview

Triangle
Hexagon
Pentagon
Diamond
7-Point
Circle
Ellipse

Shape Controls

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

How It Works

  1. Choose Shape Type: Select between polygon, circle, or ellipse from the dropdown.
  2. Use Presets: Click on preset shapes like triangle, hexagon, or circle for quick starts.
  3. Adjust Parameters: Use sliders to modify sides, inset, radius, or dimensions.
  4. Copy Code: Click "Copy CSS" to get the clip-path code for your element.

Multiple Shapes

Generate polygons, circles, and ellipses with various configurations.

Live Preview

See your clip-path shape update in real-time as you adjust parameters.

Shape Presets

Quick presets for common shapes like triangle, hexagon, and more.

Custom Input

Type custom clip-path values directly for advanced shapes.

Watch How It Works