About the CSS Clip Path Generator
The CSS clip-path property cuts an element into a custom shape, showing only the area inside the path. The CSS Clip Path Generator gives you a visual editor to create those shapes without calculating coordinates by hand.
Start from over a dozen presets, including triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, arrow, chevron, message bubble and cross, as well as circle, ellipse and inset shapes. For polygons, drag any handle on the preview to move that point and the CSS updates live. Clip paths work on images, videos, gradients and any HTML element, which makes them great for creative image frames, section dividers and hover animations.
How to use the CSS Clip Path Generator
- Pick a preset shape.
- Drag the handles to customize polygon points.
- Preview the clipped shape.
- Copy the clip-path CSS.
Frequently asked questions
Can clip-path be animated?
Yes. Transitions work between two polygons that have the same number of points, which enables smooth shape morphing effects.
Does clip-path affect clicks?
Yes. Areas outside the clip path are not clickable, so only the visible shape responds to the mouse.
Is clip-path supported everywhere?
Basic shapes like polygon(), circle(), ellipse() and inset() are supported in all modern browsers.