CSS Clip-Path Generator
Create CSS clip-path shapes visually with live preview. Polygon, circle, ellipse, inset — copy CSS instantly.
Syntax: clip-path: <shape>;
polygon() — Define a custom shape with a list of x% y% coordinate pairs separated by commas.
circle() — circle(radius at centerX centerY). Creates a circular clip with a given radius.
ellipse() — ellipse(rx ry at cx cy). Like circle but with separate X and Y radii.
inset() — inset(top right bottom left round radius). Clips a rectangular area inward from each edge, with optional border-radius.
Browser support: All modern browsers support clip-path with basic shapes. Older WebKit browsers may need -webkit-clip-path.
Tip: Clip-path is GPU-accelerated and great for creative layouts, image masking, hover effects, and scroll-based animations.
About CSS Clip-Path Generator
CSS Clip-Path Generator lets you visually create CSS clip-path shapes with live preview and instant code copy. Choose from presets (circle, ellipse, inset, polygon) or drag control points to build custom shapes. See the clipped result update in real time, then copy the CSS with one click. 100% browser-based — no data leaves your device.