Click canvas to add point. Drag handles to move.
CSS Clip-Path Generator is a visual tool for creating CSS clip-path shapes by dragging handles on a canvas, then copying the generated CSS value. It supports all clip-path shape functions: circle(), ellipse(), inset(), polygon(), and path(), with live preview on a real element.
The CSS clip-path property crops an element to a specified shape, hiding everything outside the clipping region. Unlike border-radius (which only rounds corners), clip-path can create arbitrary polygons, stars, arrows, hexagons, and complex SVG paths. It is especially useful for hero section image cropping, diagonal section dividers, and CSS-only icon shapes without additional HTML markup.
Common shapes include: diagonal cuts (polygon(0 0, 100% 0, 100% 85%, 0 100%)), hexagons (polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)), and arrows (polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%)). The generator eliminates manual coordinate calculation and lets you iterate visually until the shape is right.
Diagonal section divider
Result: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) — bottom edge angled from 85% on right to 100% on left
Circle crop on image
Result: clip-path: circle(50% at 50% 50%) — perfect circle crop centered on the element
Arrow shape pointing right
Result: clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%)
Does clip-path affect layout?
No — clip-path only affects rendering (what is visible), not layout. The element still occupies its original space in the document flow. Use it for visual effects, not to remove an element from layout.
Is clip-path animatable?
Yes — clip-path values of the same type (both polygons with the same number of vertices) can be smoothly animated with CSS transitions or animations. A polygon shape morphing to another polygon produces a fluid reshape effect.
What is the browser support for clip-path?
clip-path with basic shapes (circle, ellipse, inset, polygon) has 99%+ browser support. The path() function has slightly lower support. All modern browsers (Chrome 88+, Firefox 54+, Safari 9.1+, Edge 79+) support clip-path fully.
Can I apply clip-path to any element?
Yes — clip-path works on any HTML element, including images, divs, and buttons. It also works on SVG elements. For video elements, browser support may vary.
What is the difference between clip-path and mask?
clip-path uses a geometric shape to define what is visible — everything inside the shape is shown, everything outside is hidden. CSS mask uses an image (or gradient) where the alpha channel controls visibility, allowing smooth gradients and more complex effects.