Developer Tools New Tool

Free Online CSS clip-path Generator with a Polygon Editor

Build a clip-path by dragging points over the preview. Click to add a point, double click to remove one, and read the coordinates in per cent as you go. Inset with its own radius, circle and ellipse are here too, along with ready-made triangles, hexagons, stars, arrows and chevrons.

Free Forever Nothing Uploaded Draggable polygon points Runs in your browser

Free Online CSS clip-path Generator with a Polygon Editor

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS clip-path Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Drag a point to move it. Click anywhere else inside the frame to add one. Double click a point to remove it.

CSS

Shape Function Ready made

Inset Top Right Bottom Left Radius 0%

Circle Radius 45% Centre X Y

Ellipse Radius X Y Centre X Y

Points

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

Keeping the shadow when you clip

The shadow belongs on a wrapper, as a filter, not on the clipped element.

A clipped element has no box left to cast a shadow from, so box-shadow on it is thrown away along with everything else outside the path. The fix is to put the shadow on a parent as a filter: drop-shadow(), because that filter follows the actual painted pixels rather than the border box:

.clip-outer{
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

.clip-inner{
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

The same trick is the only way to get a border-like outline on a clipped shape: stack a slightly larger clipped element behind it in the border colour, since border on the clipped element is clipped too. Both of these are wrapper-level changes, so they are not part of the single rule this page outputs.

How to Build a CSS clip-path

A few steps, and nothing is uploaded.

Pick the function Polygon for anything with corners, inset for a rectangle pulled in from the edges, circle and ellipse for round windows. Inset is the only one with its own radius.

Start from a ready-made shape Triangle, rhombus, hexagon, star, arrow, message bubble and chevron are all loaded as editable points rather than as fixed values, so you can adjust any of them.

Move the points Drag any point over the preview. Click inside the frame to add a point, which is inserted on the nearest edge, and double click a point to remove it. The number fields below show the same coordinates in per cent.

Copy the rule The output box holds one clip-path declaration. Remember that the shape is a mask, not a layout change, so the element still occupies its full rectangle in the flow.

What to Know About clip-path

Including why your box-shadow vanishes the moment you clip.

clip-path clips the element box, and that includes its shadow. A box-shadow on a clipped element disappears completely, because the shadow is painted outside the border box and the clip throws away everything outside the path. The fix is filter: drop-shadow() on a wrapper element, which follows the visible pixels instead of the box. The section above has the exact pattern.

The element still takes up its whole rectangle. Clipping changes what is painted, not what is laid out. A triangle clipped from a 400 by 300 box still reserves 400 by 300 in the flow, and neighbouring text will not wrap into the empty corners. It also stops pointer events over the clipped-away area, so a clipped button is only clickable inside its visible shape, which is usually what you want but is worth knowing.

Per cent is measured against each axis separately. In polygon() the first number of each pair is a per cent of the width and the second is a per cent of the height, so a shape built at one aspect ratio will skew at another. If you need a shape that keeps its proportions, give the element a fixed aspect-ratio or use pixel units in the path.

This page writes one rule and does not read one back. You cannot paste an existing clip-path in and have the points appear, there is no path() or SVG reference support, no multiple subpaths, and no animation between two shapes. Values are in per cent only; if you need pixels, edit the numbers after copying.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Drag the points Points sit over the preview. Drag to move, click to add, double click to remove.

Numbers as well Every point is also a pair of per cent fields you can type into.

Ready-made shapes Triangle, rhombus, hexagon, star, arrow, bubble, chevron, all editable.

Not just polygons inset with its own radius, plus circle and ellipse with a centre.

The real clip The preview is a real element with the real rule, over a checker board.

Runs in your browser No image is loaded and nothing is sent anywhere. Works offline.

About the CSS clip-path Generator

clip-path hides everything outside a shape you describe. It is how diagonal section dividers, angled cards, hexagon avatars and arrow-shaped breadcrumbs are built now, and it replaced a long list of tricks involving rotated pseudo-elements and overflow hidden. The syntax is simple enough to read but almost impossible to write blind, because a polygon is just a list of coordinate pairs and no one can hold eight of those in their head at once.

That is why the polygon editor is the centre of this page rather than a feature of it. The points are drawn over the preview and are draggable, so you position the shape by eye and the coordinates follow. Clicking inside the frame inserts a new point on the edge nearest the click, rather than at the end of the list, because appending a point to a polygon almost always produces a crossed path. Double clicking a point removes it, and the same values are available as number fields for the times when you want exactly 33 per cent.

The preview sits on a checker board so you can see what has been clipped away rather than guessing at where the shape ends. The things the page does not do are worth stating: it writes a rule and never reads one, it uses per cent only, and it does not know about path(), SVG references, or multiple subpaths. What it does cover is the part people get stuck on, which is turning a shape in your head into a list of numbers.

Frequently Asked Questions

Winding, per cent units, shadows, borders and hit testing.

Because the shadow is painted outside the border box and the clip removes everything outside the path, shadow included. Put the shadow on a wrapper element as filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)) instead. That filter traces the visible pixels, so it follows the clipped shape properly, and it is the standard answer to this problem.

No. The element keeps its full rectangular size in the flow, and text around it will not flow into the clipped-away corners. If you want that, you need shape-outside on a floated element, which is a different property with different rules. Clipping is purely about what gets painted.

Percentages in polygon() are resolved per axis: the first value against the width, the second against the height. A 45 degree cut at one aspect ratio becomes a shallower or steeper cut at another. Set an aspect-ratio on the element, or switch those coordinates to pixels, if the angle needs to stay constant.

Yes, and that is deliberate. Pointer events respect the clip, so the area outside the shape no longer responds to the mouse and whatever sits behind it receives the click instead. This makes clipped buttons behave sensibly, but it also means a large clipped decoration will not block clicks the way a plain rectangle would.

No. The tool generates the rule from the points and never parses CSS back. If you are editing a shape you already have, load the nearest ready-made shape, drag the points until it matches, and take the new output. The page is a writer, not an importer.