What Clip Path Generator does
clip-path cuts an element down to a shape, hiding everything outside it. That lets you build hexagons, chevrons, speech bubbles and angled section dividers out of ordinary elements that still hold real content — text, a background image, a gradient — rather than flattening the design into a PNG. The preview here shows the clipped element against a dashed outline of its original box, which makes it obvious how much of the element is being cut away and why a shape sometimes appears smaller or differently positioned than expected.
Step by step
- 1
Choose a shape — the polygon presets cover the common geometric forms, and the basic shapes cover circles, ellipses and insets.
- 2
Adjust the size slider, which scales circles and ellipses and controls the inset amount for rectangles.
- 3
Set a fill colour so the shape is easy to read against the dashed original boundary.
- 4
Copy the CSS. Apply it to an element that has real dimensions, since percentages are measured against the element's own box.
What people use it for
Angled section dividers
A polygon with a slanted top edge produces the diagonal transition between page sections that would otherwise need a background image.
Hexagonal avatars and badges
Clipping keeps the image inside the shape while remaining a real img element, so it stays responsive and accessible.
Speech bubbles with a tail
The speech bubble preset includes the pointer as part of the shape, avoiding the usual pseudo-element border trick entirely.
Reveal animations
Transitioning between two polygons with the same number of points wipes content into view along any edge you choose.
How coordinates and the reference box work
Polygon points are written as x y pairs measured from the top-left corner of the element's box, so 0% 0% is the top-left and 100% 100% is the bottom-right. The points are joined in the order you list them and the shape is closed automatically, which means the order matters — listing points that cross over each other produces a self-intersecting shape rather than an error. Percentages are resolved against the element's own width and height independently, and this is the source of the most common surprise: a shape designed to look regular on a square element becomes stretched on a wide one, because the same percentage represents more pixels horizontally than vertically. Fixing it means either giving the element a square aspect ratio, or switching to absolute units so the geometry no longer depends on the box. It is also worth knowing that clip-path uses the border box by default, and you can change the reference to the padding, content or margin box by naming it in the value.
Clipping removes the element, it does not merely hide it
Unlike a decorative overlay that covers part of an element, clip-path genuinely removes the clipped-away region from rendering and, importantly, from hit testing. Clicks, hovers and taps in the removed area pass straight through to whatever sits underneath, which is usually exactly what you want — a hexagonal button should not respond to clicks in the corners outside the hexagon. That behaviour also makes clip-path useful for fixing an invisible element that intercepts clicks. The accessibility consequence is worth stating plainly: clipping is purely visual, so text clipped out of view is still in the accessibility tree and still read by screen readers, and still found by in-page search. If content should genuinely not be available, remove it from the DOM or hide it properly rather than clipping it out of sight. For animation, two clip-path values interpolate only when they use the same function with the same number of points; a polygon transitioning to a circle snaps instead of animating.
Practical notes
- Give the element explicit dimensions or an aspect-ratio, otherwise percentage coordinates distort the shape.
- To animate between two polygons, pad the simpler one with duplicate points so both have the same number.
- Anti-aliasing along a clipped diagonal is rougher than a border edge in some browsers; a subtle drop-shadow filter can soften it.