Skip to content
ZeroServer.tools

CSS Clip Path Generator

Pick a clip-path shape and copy the CSS, with live preview.

Shape
CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Clipping elements with clip-path

The CSS clip-path property masks an element to a shape — a polygon() defined by percentage coordinate pairs, or a circle() / ellipse(). Anything outside the path is hidden, while the element keeps its full box for layout. Pick a preset, preview it live, and copy the CSS — all client-side.

Private & free — this tool runs entirely in your browser.

Recommended: Kinsta Fast managed hosting — up to $500 + 10% recurring.affiliate

Related Design & CSS tools