What clip-path Does to an Element
The clip-path property defines a region, and anything outside that region is not painted and does not receive pointer events. It clips rather than masks, so there is no partial transparency at the boundary beyond antialiasing, and layout is untouched: the element still occupies its full box. This editor works with the four basic shapes that accept percentage coordinates. Percentages resolve against the element's reference box, which means a shape written this way scales with the element instead of breaking at a different size. Values using pixels, keywords such as closest-side, or an external SVG reference are valid CSS but cannot be represented as draggable handles, so the editor reports them instead of silently rewriting them.
How to Build a Shape
- 1Start from a preset that is close to the outline you want, such as the hexagon, star or message bubble.
- 2Drag the handles over the preview to reshape it, or focus a handle and nudge it with the arrow keys for exact percentages.
- 3For a polygon, add a point on any edge with the plus button or delete one you no longer need; three points is the minimum.
- 4Copy the finished declaration and paste it into your stylesheet.
- 5To adjust a shape you already have, paste its value into the edit box and load it back into the handles.
Where clip-path Shapes Are Used
Angled section dividers
Cut a diagonal edge on a hero or a band so two sections meet on a slope without exporting a background image for every breakpoint.
Non-rectangular avatars and thumbnails
Crop a portrait into a circle or hexagon while keeping the underlying image element intact and selectable by other CSS.
Reveal and hover animations
Animate between two shapes with the same number of polygon points to wipe content into view, which the browser can do on the compositor.
Recreating a shape from a design file
Paste the clip-path a designer or another tool produced, drag the handles to match a revised mockup, and copy the corrected value back.
Frequently asked questions
Why will the editor not load my clip-path value?
It only edits inset(), circle(), ellipse() and polygon() written with percentages. Pixel lengths, keywords such as farthest-corner, path() data and url() references to an SVG clipPath are all valid CSS but have no draggable percentage representation, so they are reported rather than converted into something different.
Can I animate between two of these shapes?
Yes, with a constraint. Browsers interpolate a polygon only when both shapes have the same number of points and the same fill rule, so add matching points to the simpler shape rather than relying on the browser to guess. Circles, ellipses and insets interpolate between each other of the same type.
Does clipping change the space the element takes up?
No. Layout is calculated from the full box, so surrounding content is unaffected and the clipped area simply is not painted. If you also need text to flow around the outline, that is the separate shape-outside property.
Why do parts of my element still react to clicks?
They should not. Clipped-away regions do not receive pointer events. If clicks still land, the interactive element is usually a child that is positioned outside the clipped region on a different stacking context, or a transparent overlay sits above the clipped element.