What is it?
The CSS Clip-Path Maker cuts images and boxes into shapes with pure CSS. Pick a Shape (triangle, hexagon, star, arrow, speech bubble, circle and more), drag the white dots to change the shape, and copy the clip-path code.
Who is it for?
Web designers making creative image shapes, Blogger theme editors, developers building badges and arrows, and students exploring CSS.
How to use it
- Choose a Shape.
- Drag the dots on the preview.
- Tap Copy CSS and add it to your element.
Example
A downward arrow banner: clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%). Percentages make the shape scale with the element.
Errors and how to fix them
- Shape cut off a shadow or border: clip-path also clips shadows and borders. Wrap the element and put the shadow (as
filter: drop-shadow()) on the wrapper. - Text inside gets clipped: add padding so text stays inside the shape.
- Doesn’t work in an email: email apps don’t support clip-path; use an image instead.
Questions people ask
- Does clip-path work in all browsers? Yes, polygon clip-path works in all modern browsers.
- Can I animate it? Yes, if both shapes have the same number of points, with a CSS transition.
Ideas
Hexagon profile pictures, slanted section edges on landing pages, and arrow-shaped step labels.
Practical tip
Keep important content away from the cut edges; check the shape on a phone, where small elements can lose their corners.
Open the tool: CSS Clip-Path Maker
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.