CSS Clip-Path Generator

Pick a shape — triangle, polygon, star, arrow, chevron, message bubble, and more — tune it, and copy the ready-to-paste clip-path CSS (with the -webkit- fallback). The preview runs the exact generated value, so what you see is what you get. Everything runs locally in your browser; nothing is uploaded.

Shape

Include -webkit- fallback

Preview / output color

Color

Each shape is a single CSS declaration: clip-path: polygon(...) (or circle()/ellipse() for the round shapes). Coordinates are percentages so the clip scales with your element — apply it to any box size. Browser support is broad; the optional -webkit- prefix covers older Safari/iOS. No network requests are made.