CSS Clip-Path Generator
Create clip-path polygon shapes by dragging handles on a live preview. Choose presets or build custom shapes. Copy CSS instantly.
💡 Drag the white handles to reshape. Values are in % of the element's dimensions.
Presets
Points
About CSS Clip-Path Generator
The CSS clip-path property clips an element to a defined shape. Only the pixels inside the shape are visible. Use it to create diagonal sections, hexagons, stars, arrows, and any other polygon shape.
Common Use Cases
Hero sections — diagonal bottom edge · Image masks — hexagonal or circular image frames · Decorative dividers — between page sections · Custom buttons — angled or arrow-shaped
Frequently Asked Questions
No — the element still occupies its original space. Only the visible rendering is clipped. To avoid invisible areas being clickable, you may need to add
pointer-events: none to the clipped-away regions, or use a different approach.clip-path polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It is not supported in Internet Explorer. No vendor prefixes are required for modern browsers.
In clip-path polygon(), percentage values are relative to the element's own width and height. 0% 0% is the top-left corner, 100% 0% is the top-right, 100% 100% is the bottom-right, and 0% 100% is the bottom-left.
Yes — you can animate between two clip-path polygon() values with CSS transitions or animations, as long as both polygons have the same number of points. This creates smooth morphing effects.