Generatore di percorsi a clip CSS
Choose a shape preset, adjust the sliders, and copy the CSS clip-path code.
Shape Type
Live Preview
Generated CSS
How It Works
- Choose a shape type: Select from polygon, circle, ellipse, or inset (rectangle with optional rounded corners).
- Drag the control points: Move the shape handles on the preview to customize the clip region precisely.
- Copy the CSS: The generated clip-path property value (e.g., clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%)) is ready to paste into your stylesheet.
Why Use CSS Clip-Path Generator?
CSS clip-path creates non-rectangular element shapes by masking everything outside a defined clip region. It is used for diagonal section dividers, hexagonal image crops, custom button shapes, creative hover effects, and masked image reveals. Writing clip-path polygon coordinates by hand requires calculating percentage values for each vertex — tedious and hard to visualize. This interactive generator lets you drag points visually and get the exact CSS values instantly.
Features
- Polygon editor: Add, move, and remove vertices to create any polygon shape.
- Built-in presets: Diagonal, chevron, hexagon, star, triangle, and other common shapes.
- Circle and ellipse modes: Visual controls for clipping to circular and elliptical shapes.
- Inset mode: Create rectangular clips with individual border-radius on each corner.
- Outside clip preview: See the masked area highlighted so you know exactly what will be hidden.
Frequently Asked Questions
Does clip-path affect clickable areas?
Yes. By default, pointer events only register within the clip region — the clipped-away area is both invisible and unclickable. To make the full element clickable while only visually clipping it, use pointer-events: all on the element or a transparent overlay.
Can I animate clip-path?
Yes, clip-path can be transitioned and animated with CSS. Animate between two polygon shapes with the same number of points for a smooth morphing effect. Shapes with different point counts will snap rather than interpolate.
Is clip-path supported in all browsers?
clip-path is supported in all modern browsers. For SVG-based shapes via the url(#id) syntax, browser support is broader. The basic polygon, circle, ellipse, and inset values work universally in Chrome, Firefox, Safari, and Edge.