What is CSS clip-path?

CSS clip-path is a property that defines a clipping region for an HTML element. Only the parts of the element inside the region are visible. You can create circles, ellipses, polygons, and inset rectangles with optional border-radius.

What browsers support clip-path?

clip-path is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For full support including the polygon() function, use the standard clip-path property without any prefix.

Can I use clip-path on images?

Yes! clip-path works on any HTML element including , , , and more. It clips the rendered output of the element to your defined shape.

How do I add points to a polygon?

When using polygon mode, click the 'Add Point' button to insert a new vertex at the center of the canvas. Then drag the handle to position it exactly where you want.

What is the difference between polygon and inset?

polygon() lets you define any custom shape using a list of x/y coordinate pairs. inset() creates a rectangular clipping region offset from each edge, and supports optional rounded corners via border-radius.

Are the generated clip-path values production-ready?

Yes. The tool outputs standard W3C CSS clip-path values using percentage-based coordinates, which are responsive and work correctly at any element size.

Free Visual CSS Tool

Create CSS Shapes
Visually

Design custom clip-path shapes with an interactive drag-and-drop editor. Choose from presets or create your own — copy production-ready CSS in one click.

🎨

Visual Editor

Drag handles directly on the canvas to fine-tune your clip-path shape in real time.

⚡

10+ Shape Presets

Start from triangle, hexagon, star, arrow, heart, and more — then customize to perfection.

📋

One-Click Copy

Copy production-ready CSS clip-path code directly to your clipboard with a single click.

6 points

Presets

CSS Output

clip-path: polygon(50.0% 0.0%, 100.0% 25.0%, 100.0% 75.0%, 50.0% 100.0%, 0.0% 75.0%, 0.0% 25.0%);

Preview on Image

🎨

Your Content

Frequently Asked Questions

Everything you need to know about CSS Clip Path Generator.

Create CSS ShapesVisually

Visual Editor

10+ Shape Presets

One-Click Copy

Frequently Asked Questions

Create CSS Shapes
Visually