clip-path generator
Pick a shape, adjust it, copy the CSS. No image needed.
- Runs in your browser — your text is never sent anywhere
- No sign-up, no quotas, free to use as often as you like
How it works
clip-path cuts an element down to an outline. Anything outside the shape is not drawn and not clickable, which makes it a genuine shape rather than a picture of one — and it works on any element, including images and video.
Percentages, not pixels
Polygon points are given as percentages of the element's own width and height, so the shape stretches with the element instead of breaking at a different size. That is what makes it usable in a responsive layout.
Clicks follow the shape
This is the part that distinguishes clip-path from a decorative overlay. The clipped-away region does not receive pointer events at all, so a triangular button is triangular to the mouse as well as to the eye.
Animating between shapes
A polygon can transition smoothly into another polygon only if both list the same number of points. The usual trick is to pad the simpler shape with duplicate points so the counts match — a triangle written as four points with two in the same place can morph into a square.
The -webkit- line
Current browsers need only the unprefixed property. The prefixed copy is included because some older Safari versions still require it and it costs nothing to leave in.
What it does not do
It clips; it does not reflow. Surrounding text still treats the element as its original rectangle. To make text wrap around a shape you want shape-outside, which takes the same syntax.
clip-path generator — questions
Do the clipped areas stay clickable?
No. Anything outside the shape receives no pointer events, which is usually exactly what you want.
Can I animate a clip-path?
Between polygons with the same number of points, yes. Pad the simpler shape with duplicate points to match.
Does text wrap around the shape?
No. clip-path only clips. Use shape-outside for wrapping.
Is the -webkit- prefix needed?
Only for older Safari. Every current browser supports the plain property.
Can I use it on an image or video?
Yes, on any element.