Advertisement
Create CSS clip-path shapes visually. Drag polygon points or use circle, ellipse and inset, then copy the code as CSS, Tailwind or React.
Cut elements into shapes and copy the code.
Pick a shape, then drag its points.
Dashed outline = full element
polygon(50% 0%, 0% 100%, 100% 100%)
Drag a point, or focus it and use the arrow keys (Shift = 10). Delete removes it.
Copy and paste directly into your project.
Cut any element into a shape with the CSS clip-path property. Start from a preset such as a hexagon, star or arrow, drag the points to reshape it, add or remove points, or switch to a circle, ellipse or inset rectangle with rounded corners. Percentages keep the shape responsive, and you can preview it on your own image. Copy the result as CSS, a Tailwind class or a React style object.
What you get with CSS Clip-Path Generator.
Drag points on the preview, nudge them with the arrow keys, or type exact values.
Polygon, circle, ellipse and inset with rounded corners.
Start from a triangle, hexagon, star, arrow, speech bubble and more.
Copy the result in the format your project uses.
Follow these steps to get the best results.
Pick a polygon preset, or switch to circle, ellipse or inset.
Drag the points on the preview. Add a point to make a more detailed shape, or remove one you do not need.
Pick CSS, Tailwind or React and paste it into your project.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Advertisement
Common questions about CSS Clip-Path Generator.
It hides everything outside a shape you define, so an element, image or video can be a triangle, hexagon, circle or any polygon instead of a rectangle. The element keeps its normal size in the layout.
Yes. The values are percentages of the element's own width and height, so the shape stretches with it. A circle's percentage radius is measured against the element's diagonal, so it is only a perfect circle on a square element.
Yes, but both shapes must be the same type, and polygons must have the same number of points. Keep the point count equal in every state, and the browser will smoothly move each point.
Only inside the visible shape. Clicks and hovers on the clipped-away area pass through, and borders or shadows outside the shape are cut off too.
Yes. The Tailwind output is an arbitrary property such as [clip-path:polygon(50%_0%,_0%_100%,_100%_100%)] that you can add straight to a class list.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.