By Team Edtoolkits · Design & branding
Draw clip-path polygons, smooth blobs and organic border-radius shapes by dragging points, then copy the CSS. Start from presets like hexagon, star and arrow, and export CSS or SVG.
Use the guide alongside the working tool.
Open CSS Clip-path Generator →Get started
Choose Polygon, Blob or Radius.
Adjust and explore
Drag points or use the sliders; try a preset to start.
Save and share
Copy the CSS, or download it as a CSS or SVG file.
Privacy and limits
Shapes are polygons and border-radius only; there are no curved clip-path paths. clip-path also clips shadows and borders. Nothing is uploaded; your work stays on your device.
Ready to apply this workflow?
Try CSS Clip-path Generator →Explore a related workflow
- CSS Gradient Generator: A Practical Guide
Design linear, radial and conic gradients with editable stops, then export CSS, PNG or supported SVG.
- CSS Shadow Generator: A Practical Guide
Create layered box or text shadows with live preview, precise controls and ready-to-copy CSS.
- Product Mockup Maker guide
Place artwork in phone, laptop, book, poster, shirt and mug mockups.
- Seamless Pattern Maker: design and export guide
Design seamless repeats with straight, brick, half-drop and mirrored layouts. Export the repeat tile or a finished pattern.
Keep your original files and review the result. Found unclear instructions? Contact Team Edtoolkits.