What is CSS clip-path?

CSS clip-path is a property that creates a clipping region to define which parts of an element are visible. Anything outside the clipping region is hidden. It supports shapes like polygon, circle, ellipse, and inset.

Is the CSS clip-path property supported in all browsers?

CSS clip-path is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older WebKit browsers, use the -webkit-clip-path prefix which this generator provides automatically.

Can I create custom shapes with clip-path?

Yes, with the polygon() function you can create any shape by defining a series of x,y coordinate points. This generator lets you drag control points visually or start from preset shapes like triangles, stars, hexagons, and arrows.

Free CSS Clip Path Generator

Create CSS clip-path shapes visually. Drag control points on a preview element to create polygon, circle, ellipse, and inset shapes. Includes preset shapes like triangle, star, hexagon, and more. Live CSS output.

Preview

Shape Type

Presets

CSS Output

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →

Open source

IT-Tools

269 free tools. No signup. Open source. Built by Christian Bucher.

IT-Tools Browse 269 Free Tools →

Free CSS Clip Path Generator

Need something more powerful?

IT-Tools

Related Tools