CSS Clip-Path Generator

Polygon shapes for clip-path

CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Loading tool…

About the CSS Clip-Path Generator

Generate CSS clip-path polygons for twelve shapes — triangle, trapezoid, rhombus, pentagon, hexagon, octagon, star, arrow, message bubble, cross, and frame — with instant visual preview. Copy the clip-path declaration and apply it to any element or image.

How to use

1Pick a shape.
2Check the live preview.
3Copy the clip-path CSS.

Related Colors & Design tools

Color Picker & Converter Gradient Generator Box Shadow Generator Flexbox Builder Grid Builder Border Radius Generator

CSS Clip-Path Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.