CSS clip-path generator for polygons, circles and insets
Edit clip-path shapes visually with draggable points and export CSS, an SVG clipPath, a Tailwind class or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Drag the points of a polygon, or switch to a circle, ellipse or inset shape, and the preview updates as you move. Handles are keyboard operable, and you can add or remove points. A shape library gives you a hexagon, star, arrow and speech bubble to start from.
The output is a CSS clip-path, an SVG path or clipPath, a Tailwind arbitrary-property class or a TSX component. Use it for image masks, hero cut-outs and angled section edges.
How to use it
- Pick a shape type or a preset from the library.
- Drag the points, or move them with the keyboard.
- Add or remove points for a custom outline.
- Copy the CSS, the SVG path or the React component.
This generator is also a component of the kit: Generator Clip Path, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.