CSS Clip Path Generator
Generate common CSS clip-path shapes with live preview CSS.
Overview
The CSS Clip Path Generator emits ready-to-paste clip-path declarations for the common shapes: circle, ellipse, inset rectangle, polygon (triangle, hexagon, parallelogram, arrow, chevron, blob), and the new path() and xywh() syntaxes. A live preview shows exactly which part of the box is visible.
Useful when learning how to clip an image into a hexagon with CSS or how to write a clip-path polygon for custom section dividers. Designers and front-end developers reach for it building hero sections with angled bottoms, badge shapes, and decorative cut-outs.
How it works
clip-path restricts the painted area of an element to the shape you provide. The CSS Masking Module defines circle(), ellipse(), inset(), polygon(), path() (SVG path syntax), and rect()/xywh() (modern positional forms). Anything outside the shape is hidden from rendering but still occupies layout — meaning clicks on transparent areas are absorbed by the element.
The generator emits coordinates relative to the box (percentages from the top-left), normalises whitespace, and supports the optional at <position> for circle/ellipse. Polygon vertices can be reordered visually so you don't have to count angles.
Examples
- A 50% circle →
clip-path: circle(50%);. - A triangle pointing right →
clip-path: polygon(0 0, 100% 50%, 0 100%);. - A hexagon →
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);. - An angled section bottom →
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);.
FAQ
Does clip-path affect layout?
No. The element still occupies its full box for layout purposes. Only painting is clipped.
Can I animate clip-path?
Yes between shapes of the same type (polygon→polygon with the same vertex count, circle→circle). Animations between different shape functions are not interpolated.
Why are click events absorbed by the hidden area?
The default pointer-events: auto ignores clip-path. To make clicks pass through the hidden area, set pointer-events: none on the element.
clip-path vs SVG mask?
clip-path is binary (a pixel is either visible or not). SVG masks support partial opacity, so use mask when you need a soft edge or gradient cut-out.