The CSS Clip Path Generator lets you crop any element into a shape and copy the CSS. Pick from a library of ready-made shapes — triangle, hexagon, star, arrow, message bubble, circle, ellipse, and more — and see the clip applied live to a sample gradient or your own uploaded image. Then copy the clip-path value as CSS or a Tailwind arbitrary class.
clip-path shows only the part of an element that falls inside the shape and hides the rest, without changing the layout box. It is a lightweight, non-destructive way to make angled sections, badges, and decorative image masks. Everything runs in your browser and uploaded images never leave your device.
How to use the clip-path generator
- Choose a shape from the library and watch it apply to the preview.
- Optionally click “Preview on your image” to see the shape crop your own photo.
- Copy the generated clip-path (CSS or Tailwind) into your stylesheet.
- Apply it to an element — remember to give that element a width and height so the shape has an area to clip.
How clip-path works
clip-path defines a region and hides everything outside it. The most flexible value is polygon(), a list of x y coordinate pairs (usually percentages) that trace the shape’s outline — 0% 0% is the top-left corner and 100% 100% is the bottom-right. There are also basic shapes: circle() and ellipse() take a radius and a centre, and inset() cuts a rectangle in from each edge with optional rounded corners. The element keeps its original box for layout; only its painting is clipped.
Common uses
Clip paths are great for angled or diagonal section dividers, hexagon avatar grids, star ratings and badges, arrow and chevron shapes for steppers, and speech-bubble callouts. Because the clip is applied at paint time, you can animate or transition a polygon (as long as the two states have the same number of points) for reveal effects, and it stays crisp at any resolution.
Tips and gotchas
The element needs a defined size — clip-path has nothing to clip on a zero-height box. Content outside the shape is hidden but still takes up space and can still be interacted with unless you also clip pointer events. For shapes that must respond to clicks only inside the visible area, pair clip-path with care around hit-testing. Percentages are relative to the element’s box, so the same shape scales automatically with the element.
Frequently Asked Questions
What is CSS clip-path?
clip-path is a CSS property that clips an element to a shape — such as a polygon, circle, or inset rectangle — showing only the area inside the shape and hiding the rest, without affecting the element’s layout.
Can I use clip-path on an image?
Yes. clip-path works on almost any element, including images. Use “Preview on your image” to test a shape on your own photo, then apply the copied clip-path to your <img>.
Why is nothing showing after I apply a clip-path?
The element needs a width and height. clip-path only clips the visible box, so an element with no size (or that has collapsed) has nothing to show. Give it explicit dimensions or make sure its content sizes it.
Can I animate a clip-path?
Yes, you can transition or animate polygon() shapes as long as both states have the same number of points, which makes smooth reveal and morph effects possible.
Can I get the shape as a Tailwind class?
Yes. Switch the output to “Tailwind” to get an arbitrary [clip-path:…] class. Underscores stand in for spaces in Tailwind arbitrary values.
Does clip-path work in all browsers?
Yes. clip-path with basic shapes and polygons is supported in all modern browsers, so the generated CSS works everywhere without vendor prefixes.