Clip Path Generator
Clip elements into arrows, stars, hexagons or your own polygons — drag points on the canvas and copy the clip-path code.
Drag points to reshape · double-click canvas to add a point
How to Use the Clip Path Generator
- Pick a preset shape, or start dragging the points of the default pentagon.
- Double-click anywhere on the canvas to insert a new point on the nearest edge.
- Select a point and press “Delete point” to remove it (minimum 3 points).
- Switch to circle, ellipse or inset mode for parametric shapes with rounded corners.
- Copy the clip-path declaration — percentages keep the shape responsive at any size.
About This Clip Path Generator
The CSS clip-path property clips an element to a basic shape — polygon, circle, ellipse or inset — hiding everything outside it. It is the standard way to build non-rectangular layouts: angled section dividers, hexagon image grids, arrows, speech bubbles and star ratings, all without images or SVG.
This editor lets you design shapes visually: drag polygon vertices on the canvas, double-click to add points, or start from 15 hand-tuned presets. All coordinates are percentages, so your shapes scale with the element. The output includes the -webkit-clip-path prefix for older Safari versions, and a Tailwind arbitrary-value class for utility-first projects.
Clip Path FAQ
How do I add or remove polygon points?
Double-click anywhere on the canvas — a new point is inserted into the nearest edge at that spot. To remove a point, click it to select it (it turns red) and press “Delete point”. A polygon always keeps at least 3 points.
What coordinate system does clip-path polygon use?
Each point is an x/y pair measured from the element's top-left corner. This generator uses percentages, so 0% 0% is top-left and 100% 100% is bottom-right. Percentage coordinates scale automatically with the element, keeping your shape responsive.
Can I animate a clip-path?
Yes — clip-path is animatable in CSS as long as the start and end shapes are the same type with the same number of points (for polygons). Design your two states here, keep matching point counts, and transition between them with transition: clip-path .3s.
Does clip-path affect child elements and overflow?
clip-path clips the entire element including its children, borders and even box-shadow — anything outside the shape is hidden and unclickable. If you need a shadow around a clipped shape, apply drop-shadow() as a filter on a parent element instead.
What is the difference between clip-path and SVG clipPath?
CSS clip-path basic shapes (polygon, circle, ellipse, inset) cover most layout needs with a single line of code and are animatable. SVG clipPath supports complex paths with curves — use CSS shapes for geometric designs (this tool), and SVG when you need bezier curves.