CSS Clip-Path Generator — Shape Clipper

How Clip-Path Works: Cutting Without Changing Layout

CSS clip-path is a visual scissors tool — it masks away parts of an element to reveal only the shape you define. But here is the critical surprise: the element keeps its full width and height in the layout. Neighbours stay pushed by the original rectangle, even though only a triangle is visible. This is not a bug; it is the feature. If you want to shrink the space something occupies, use width and height. If you want a triangle that still reserves its square, clip-path delivers.

Percentages Stay Responsive, Pixels Lock in Place

The generator above uses percentages for every coordinate. This means a polygon defined as 50% 0%, 0% 100%, 100% 100% reshapes itself as the element resizes — a triangle that stays triangular at any viewport. Switch to pixels (e.g., 100px 0px) and the shape is anchored to the element's original size, breaking when the box grows or shrinks. For responsive design, percentages are the right choice; pixels work for fixed-size components like icons or buttons.

Pointer Events and Clicks Follow the Visible Shape

In browsers that support it, clicks and hovers register only inside the clipped region. This is handy for a diagonal button or hexagonal card — you can click only the visible triangle, not the invisible corners. But if you clip an interactive element (a link or input field), the clipped-away area becomes unreachable. Test on your target browsers before clipping something people need to interact with.

What Clip-Path Cannot Do

Clipping produces hard edges with no feather or blur — use mask or filter: blur() if you need soft transitions. Clipped overflow cannot be scrolled back into view; the cut is permanent. The tool generator offers 10 preset shapes (hexagon, pentagon, star, circle, ellipse, and six polygon variants) with percentage-based coordinates, but does not provide vertex dragging or custom coordinate input. For pixel-perfect manual control, write CSS directly or use a design tool with clip-path export.

A clip path changes an element's shape without changing its box, which is why it pairs badly with a hard-edged shadow — the shadow follows the box, not the clip. The box-shadow generator is where to see that interaction.