CSS Clip-path & Shapes Generator

Design custom shapes with responsive clipping masks. Drag nodes on the canvas and copy the polygon code.

Interactive Canvas

Drag the circular node anchors to customize the polygon shape.

Predefined Shapes

Coordinates

Vertex #1

X:50%

Y:0%

Vertex #2

X:100%

Y:100%

Vertex #3

X:0%

Y:100%

Clip-path CSS Style

Related Web Tools:

Bijoy to Unicode Converter PDF to Image Converter Zen Notepad Word Counter Live Code Editor JSON-LD Schema Generator

About CSS Clip-path & Shapes Generator

The CSS `clip-path` property allows you to create clipping masks to hide portions of an element, rendering custom geometries like triangles, trapezoids, stars, or complex polygons instead of standard squares.

This generator provides an interactive canvas to edit shapes visually. Drag anchors or tweak coordinates on sliders, add new vertices (up to 12), and instantly copy copy-pasteable CSS rules for your design workflow.

💬If you encounter any issues with this tool, please let us know: