What is CSS clip-path?

clip-path is a CSS property that masks an element to a specified shape, hiding everything outside that shape. It supports several functions: polygon() for multi-point shapes, circle() for circular clips, ellipse() for oval clips, and inset() for rectangular clips with optional rounded corners. The clipped area is still part of the DOM layout — only its visible pixels are hidden.

How does the polygon drag editor work?

The polygon editor renders an SVG with viewBox="0 0 100 100" so every coordinate maps directly to a percentage. Each vertex is a draggable circle handle. When you press down on a handle the SVG captures pointer events; as you move, the handle tracks your cursor in real time and updates the clip-path preview. Lifting the pointer releases capture and finalises the coordinate.

What do the percentage values in polygon() mean?

Each point in a polygon() value is expressed as "X% Y%" relative to the element's bounding box. 0% 0% is the top-left corner and 100% 100% is the bottom-right corner. This means the shape scales perfectly with the element regardless of its dimensions.

Why are both -webkit-clip-path and clip-path included in the output?

-webkit-clip-path was required for older versions of Safari and Chrome before the un-prefixed clip-path became universally supported. Modern browsers support clip-path without a prefix, but including the -webkit- prefix ensures compatibility with older WebKit-based browsers and some mobile browsers.

What is the inset() function and when should I use it?

inset() clips an element as a rectangle defined by top, right, bottom, and left offsets from the element's edges. It also accepts an optional "round " argument to create rounded rectangular clips. Use it when you want to trim the edges of an element — for example to remove a border area — without using overflow: hidden.

Can I add more than 5 points to a polygon?

Yes. Click "Add Point" to insert a new vertex between the current last point and the first point, allowing you to build polygons with as many vertices as you need. The minimum is 3 points (a triangle). Points are added at the midpoint between the last and first vertices so the shape stays geometrically valid.

Does clip-path affect element layout or click area?

clip-path only affects the visible rendering of an element; it does not change the layout box or reduce the click/pointer area. The element still occupies its full rectangular space in the document flow. If you also need the interactive area to match the clip shape, you would need a separate SVG hit-area solution.

Is my data sent to any server?

No. The CSS Clip Path Generator runs entirely in your browser. All calculations are performed client-side in JavaScript. No shape data, coordinates, or CSS output is transmitted to any server, and no account or signup is required.

CSS Clip Path Generator

Visual CSS clip-path generator with draggable polygon editor

Updated Mar 2026100% Private — runs in browser

Polygon Editor

#	X %	Y %
1
2
3
4
5

Presets

Live Preview

Show outline

GradientSolid color

CSS Output

-webkit-clip-path: polygon(50.0% 0.0%, 100.0% 38.0%, 81.0% 100.0%, 19.0% 100.0%, 0.0% 38.0%);
clip-path: polygon(50.0% 0.0%, 100.0% 38.0%, 81.0% 100.0%, 19.0% 100.0%, 0.0% 38.0%);