How to make a CSS clip-path
- Pick a starting shape: triangle, hexagon, star, arrow, speech bubble and more.
- Drag the white handles to reshape it. Tap a colored midpoint to add a corner there; double-tap a handle to delete it.
- Preview it on the gradient or drop in your own photo.
- Copy the CSS and add it to any element: images, cards, section backgrounds or hero banners.
About clip-path
The CSS clip-path property cuts an element to a shape. Everything outside the shape becomes invisible and does not receive clicks. polygon() takes a list of points as percentages of the element's width and height, so shapes scale with the element. circle() and ellipse() make round crops without needing border-radius, and they can be positioned with at x y.
Popular uses include slanted section edges on landing pages (the "Slanted edge" preset), hexagonal team photos, arrow-shaped breadcrumbs and badges. Clip paths can also be animated with CSS transitions as long as the start and end polygons have the same number of points, which makes for striking reveal effects on hover.
clip-path with basic shapes works in all modern browsers. Note that box shadows are clipped too; use filter: drop-shadow() on a parent element if you need a shadow around the shape. The generator runs entirely in your browser, and your image is never uploaded.
How do I animate a clip-path?
Add transition: clip-path .4s and change the polygon on hover. Both polygons need the same number of points.
Why can't I see a border on my clipped element?
Borders and outlines are clipped along with everything else. Draw the outline with a wrapper element or an SVG instead.
Can I use pixel values?
Yes, polygon points accept any length, but percentages keep the shape responsive.