CSS Clip-Path Generator
Generate CSS clip-path shapes visually
About CSS Clip-Path Generator
Generates CSS clip-path shapes — triangles, hexagons, arrows, organic blobs, and other non-rectangular shapes — visually, with the corresponding CSS code to copy into your project. Or build your own shape from scratch by clicking points onto a canvas.
Choose a shape from the presets, preview it applied to a sample element, and copy the generated CSS clip-path code. Or switch to "Build Your Own" and click to place points around the outline of a custom shape — at least 3 points — to generate its clip-path automatically.
Clip-path shapes crop an element rather than resizing it, so make sure your underlying image or content is large enough that the important parts survive being cropped into the shape you choose. The Blob shapes and Diagonal Section are currently common in web design for softer, less rigid-looking layouts than a plain rectangle. When building a custom shape, place points in order around the outline (clockwise or counter-clockwise) rather than jumping across the shape, or the polygon can end up with crossed, self-intersecting edges.
Watch: CSS Clip-Path Generator in Action
- Does clip-path resize my image, or just crop it?
- It crops rather than resizes — make sure your underlying image or content is large enough that the important parts survive being cropped into the shape you choose.
- What order should I click points in when building a custom shape?
- Place points in order around the outline, either clockwise or counter-clockwise, rather than jumping across the shape — otherwise the polygon can end up with crossed, self-intersecting edges.
- How many preset shapes are there?
- Sixteen: Triangle, Trapezoid, Parallelogram, Pentagon, Hexagon, Octagon, Star, Cross, Arrow, Diamond, Circle, Ellipse, Message Bubble, Blob 1, Blob 2 and Diagonal Section. Circle and Ellipse use circle() and ellipse(); the other fourteen use polygon().
- How many points do I need for a custom shape?
- At least three. Until then the preview stays empty and the CSS box asks you to add points. Pressing Copy CSS with fewer than three points shows an error instead of copying anything.
- Can I move a point after I place it?
- No. You can remove only the most recent point with Undo Point, or wipe everything with Clear All. If a point in the middle is wrong, undo back to it, or clear and redraw the outline.
- What does the copied CSS look like?
- A single declaration such as clip-path: polygon(50% 0%, 0% 100%, 100% 100%); that you paste onto an element. Custom shapes use the same form, with each point written as a percentage pair to one decimal place.
- Why does my copied shape not fill my image the same way as the preview?
- Percentages refer to the element's own box. If your element has a different width and height than the 192 pixel square, the same polygon is stretched to match, so angles will look different on a wide or tall element.
How to use CSS Clip-Path Generator
Pick a mode at the top. In Preset Shapes, click one of the sixteen buttons and the sample square beside it changes to that outline: Triangle, Trapezoid, Parallelogram, Pentagon, Hexagon, Octagon, Star, Cross, Arrow, Diamond, Circle, Ellipse, Message Bubble, Blob 1, Blob 2 or Diagonal Section. The CSS line below the preview updates to match.
In Build Your Own, click inside the dashed grid to drop corner points one after another, going around the outline. Lines connect them, and a dashed line closes the shape once you have three. Undo Point removes the last click and Clear All starts over. Press Copy CSS when the line reads the way you want.
When to use it
Use it for cutting a photo into a hexagon or arrow shape, giving a hero section a slanted bottom edge, or masking a card with a speech-bubble outline. The point builder is useful when a designer hands you an odd polygon and you need its percentages quickly without opening vector software.
When not to use it
It cannot draw curves other than the built-in circle and ellipse, so the two Blob presets are many-sided polygons rather than smooth paths. If you need rounded corners on a custom shape, a bezier outline or a path() value, an SVG editor is a better choice. It also will not move existing points, only remove the latest.
Tips for best results
Click your points in order around the edge, either clockwise or counter-clockwise, because jumping across the grid produces crossed edges and a bow-tie fill. Aim for the grid lines, which sit every 10 percent, to keep numbers tidy. Since every value is a percentage, the shape scales with the element, so test it on both a wide and a tall box.
Limitations
Custom shapes accept straight-edged polygons only, and points cannot be dragged after placing. Coordinates are saved to one decimal place as percentages of the box. The copied text is the standard clip-path property without a vendor prefix. The preview is a fixed 192 pixel square filled with a color gradient, not your own image.
Privacy
Everything here is plain geometry. Preset outlines are stored as text inside the page, and your clicks are turned into percentages from the position inside the grid box. No image is required or uploaded, and the CSS is only written to your clipboard when you press the button. Interacting may register one use with the site's counter, tagged with an anonymous browser id.
More from Design & Color: