CSS Clip Path Generator — Visual clip-path Builder
Visually generate CSS clip-path values (circle, ellipse, polygon, inset) with live preview.
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
About CSS Clip Path Generator — Visual clip-path Builder
CSS Clip-Path Generator lets you create clip-path shapes visually. Supports polygon (drag-and-drop points), circle, ellipse, and inset. Choose from 10 presets (triangle, hexagon, star, arrow, and more) or draw your own. Copies -webkit-clip-path and clip-path CSS instantly.
How to Use
- 1Select a shape type: polygon, circle, ellipse, or inset.
- 2For polygon: drag the handles on the canvas to move points, click empty area to add a point, right-click a point to delete it. Or pick a preset shape.
- 3Copy the generated CSS and paste it into your stylesheet.
Features
- Supports polygon, circle, ellipse, and inset shape types
- Drag-and-drop polygon point editor on a live preview canvas
- 10 built-in presets: triangle, diamond, pentagon, hexagon, star, arrow, cross, and more
- Outputs both clip-path and -webkit-clip-path for full browser compatibility
- Percentage-based coordinates — works at any element size
CSS clip-path: The Basics
clip-path defines a clipping region for an element. Only pixels inside the region are rendered; everything else becomes transparent. Unlike border-radius (which only handles rounded corners), clip-path can create any polygon, circle, or ellipse shape.
polygon() — Custom shapes
polygon() takes a list of X Y coordinate pairs as percentages. clip-path: polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle. Coordinates are relative to the element's bounding box, so the shape scales automatically.
circle() and ellipse()
circle(radius at cx cy) clips to a circle. Use closest-side or farthest-side as radius keywords to auto-fit. ellipse(rx ry at cx cy) allows different horizontal and vertical radii for oval shapes.
inset() — Rectangular clips
inset(top right bottom left) clips from each edge inward. Add round <radius> to create rounded inset rectangles. Example: inset(10% 15% round 20px) clips with 10% from top/bottom, 15% from sides, and 20px corner radius.
Practical Use Cases
clip-path is widely used for creative layouts, image shaping, and hover effects.
Diagonal section dividers
Apply clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) to a hero section for a slanted bottom edge. The next section appears to slide underneath, creating a layered depth effect.
Hover morphing animation
Set clip-path on an element and a different polygon on :hover, with transition: clip-path 0.4s ease. The shape smoothly morphs between states. Both polygons must have the same number of points.
FAQ
- What is CSS clip-path?
- clip-path is a CSS property that clips an element to a defined shape. Pixels outside the shape are hidden. It works on any element — divs, images, videos — and supports polygon, circle, ellipse, and inset shapes.
- Can I animate clip-path?
- Yes. Add transition: clip-path 0.4s ease to your element and change the clip-path value on hover or via JavaScript. For polygon, both states must have the same number of points for smooth animation.
- Does clip-path affect layout?
- No. clip-path only affects the visible area, not the layout space. The element still occupies its full box in the document flow — only the painted pixels are clipped.
- Why use -webkit-clip-path?
- Older versions of Safari require the -webkit- prefix. Modern Safari (15.4+) supports the unprefixed property, but including both ensures compatibility across all browsers.
- Can I use clip-path on images?
- Yes. clip-path works on <img>, <video>, and any HTML element. It is commonly used to create custom-shaped hero images, avatar cutouts, and decorative section dividers.
Found a bug or something not working as expected?
Report a bug →