Shapes
Polygon Tools
Point Editing
Preview Background
Editor
#X (%)Y (%)
How to use
- Drag points to adjust the shape
- Add or remove points as needed
- All values are in percentage (%)
- Changes reflect in real-time
Your CSS
.shape {
clip-path: polygon(
50% 0%,
100% 100%,
0% 100%
);
}Your HTML
<div class="shape">
Content
</div>Preview Options
Overlay color
%
About CSS Clip-Path Generator
Create custom CSS shapes online — polygons, stars, blobs and more. Drag points to design your shape, then copy clean CSS instantly.
Also check out the Border Radius Generator, the Grid Generator and the Glassmorphism Generator.