CSS Clip Path Generator
Create CSS clip-path shapes: polygons with draggable points and presets, circle, ellipse and inset with rounded corners. Live preview and copy code.
Shape
Shape settings
Drag the handles in the preview or type exact values.
Preview
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Related Tools
View AllWhat is Clip Path Generator?
Draws clip-path shapes visually. Polygons can be edited by dragging points in the preview or typing exact percentages, with presets from triangles to stars and speech bubbles; circle, ellipse and inset shapes are set with sliders.
How to use Clip Path Generator
- Choose a Shape: Polygon, Circle, Ellipse or Inset.
- For polygons pick a preset, then drag the handles or type the X/Y percentage of each point; use Add point / Remove point.
- For circle and ellipse set the radius and center; for inset set Top, Right, Bottom, Left and an optional Corner radius.
- Toggle Show the clipped-away area to see what is cut off.
- Copy the CSS code.
Example
Hexagon preset with point 1 moved to X 20%
clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
When to use Clip Path Generator
Use clip-path for decorative image shapes, angled section edges, hexagon avatars and reveal animations (clip-path is animatable between shapes with the same number of points). Content outside the shape is hidden and does not receive clicks. For rounded rectangles prefer border-radius; for shapes that text should flow around use shape-outside.
How Clip Path Generator works
Coordinates are percentages of the element's border box, measured from the top-left corner. Polygons are written as polygon(x% y%, …) in point order, circles as circle(r% at x% y%), ellipses as ellipse(rx% ry% at x% y%) and insets as inset(top right bottom left round r) with the four offsets shortened like margin shorthand. Add point inserts a new point halfway between the selected point and the next one.
Common Use Cases
- Hexagon or star-shaped avatars
- Slanted hero section edges
- Arrow and chevron step indicators
- Speech-bubble cards
- Shape-morphing hover animations
FAQs
Do I need -webkit-clip-path?
Not for basic shapes in current browsers; Safari has supported the unprefixed property since version 13.1.
Can I animate clip-path?
Yes, with a transition or keyframes, as long as both shapes are the same type and polygons have the same number of points.
Why can I not click the hidden part of my element?
clip-path also clips hit-testing: areas outside the shape are not clickable.