Create CSS clip-path shapes visually with live preview
Create CSS clip-path shapes with preset polygons, circles, ellipses, and insets. Preview shapes in real-time and copy the CSS code. This tool runs entirely in your browser — no data is sent to any server.
The CSS clip-path property creates non-rectangular shapes by defining a clipping region — only the area inside the path is visible. This enables creative layouts impossible with traditional box-model CSS: diagonal sections, hexagonal profile photos, wave-shaped hero sections, angled image reveals, and complex geometric designs. clip-path supports basic shapes (circle, ellipse, inset rectangle with rounded corners) and polygon paths (any shape defined by coordinate points). It's GPU-accelerated and animatable — making it perfect for creative transitions and hover effects. This generator provides a visual editor with draggable control points, so you can design complex shapes without calculating coordinates manually.
Built-in: circle(), ellipse(), inset() for rounded rectangles, and polygon() for any custom shape. With polygon, you can create triangles, hexagons, stars, arrows, speech bubbles — anything definable by straight-line coordinates.
Yes — clip-path transitions smoothly between shapes with the same number of points. This creates impressive reveal effects, morphing shapes, and creative hover animations. Ensure both states have the same polygon point count.
The clipped area is still part of the element — by default, you can click the invisible parts. Use pointer-events in combination to restrict interaction to the visible area only.
clip-path creates hard-edged shapes (all or nothing). CSS mask allows gradual transparency (like Photoshop masks) using images or gradients. clip-path is simpler and better supported; mask offers more visual effects.
clip-path is supported in all modern browsers (Chrome, Firefox, Safari, Edge). For older Safari, add -webkit-clip-path as a fallback. IE11 doesn't support it at all — use a rectangular fallback.