CSS Clip Path Generator

The CSS clip-path property creates a clipping region that defines which part of an element is visible. Parts inside the region are shown, while parts outside are hidden. You can create circles, ellipses, polygons, and other shapes.

This tool features:

• Real-time preview — See the clip-path update instantly as you adjust controls.
• Preset shapes — Choose from Circle, Ellipse, Inset, Triangle, Diamond, Hexagon, Pentagon, Star, Chevron, Frame, and Ribbon.
• Custom polygon — Define your own polygon points for unique shapes.
• Copy CSS — Export the generated clip-path code with one click.

1. Choose a shape preset — Select from common clip-path shapes like Circle, Triangle, Hexagon, or Star.
2. Adjust the preview — Use the width and height sliders to resize the preview area. Customize the background color.
3. Copy the CSS — Click Copy CSS to copy the generated clip-path property to your clipboard.