CSS Clip-path Generator
Cut elements into triangles, hexagons, stars, arrows or any shape you draw. Drag the points on the preview, add more with a double-click, and copy the clip-path CSS.
· Drag points to move them, double-click an edge to add one, right-click (or select and press Delete) to remove. Arrow keys nudge a selected point.
How to create a clip-path
- Pick a starting shape such as Hexagon, Star or Arrow, or choose circle, ellipse or inset.
- Drag the white points on the preview to reshape a polygon. Double-click near an edge to add a point; right-click a point to remove it. For circles and insets, use the sliders.
- Copy the CSS and add it to any element: images, cards, buttons or whole sections.
What clip-path does
clip-path hides everything outside a shape, so an element appears cut out. Unlike a mask image, the shape is defined in CSS, scales with the element, and can be animated. It is popular for angled section dividers, hexagonal profile photos, arrow-shaped buttons and image reveals.
Polygon points are given in percentages of the element’s width and height, so the same shape fits any size. circle() and ellipse() take a radius and a center; inset() cuts in from each edge and can round the corners.
Tips
- Clipping does not change layout: the element still takes up its full rectangle, and only the visible area receives clicks.
- Box shadows and borders are clipped too. For a shadow around the shape, put
filter: drop-shadow()on a parent element. - You can animate between two polygons with a transition, as long as both have the same number of points.
- All modern browsers support clip-path; the -webkit- prefix is only needed for Safari versions from before 2020.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
Why can I still click outside the shape?
You cannot: pointer events only reach the visible part. But the element still occupies its full rectangle in the layout, so nearby elements do not move into the clipped area.
Can I animate a clip-path?
Yes. Transition or animate between two shapes of the same type with the same number of points, for example two polygons with six points each.
How do I add a shadow to a clipped element?
box-shadow is clipped away. Wrap the element and put filter: drop-shadow(…) on the wrapper instead.
Does it work on images?
Yes. clip-path works on any element, including img and video.
Is anything sent to a server?
No. Everything is calculated in your browser, and nothing you enter leaves your device.