🍋 CSS Tools
CSS Clip-Path Generator
chars
words
sentences
lines
Options
Results
Result
About CSS Clip-Path Generator
Generate CSS clip-path shapes with 15 geometric presets including triangles, stars, hexagons, and arrows. Custom polygon support with animated transition variants.
Frequently Asked Questions
What shapes are included?
15 presets: triangle, diamond, pentagon, hexagon, octagon, star, cross, arrow-right, arrow-left, chevron, parallelogram, trapezoid, rhombus, badge, and tag.
Can I create custom shapes?
Yes. Enter custom polygon points as comma-separated x% y% pairs. The tool also shows how to animate between shapes using CSS transitions.