CSS Clip-Path Generator
Build a CSS clip-path shape — circle, ellipse, triangle, pentagon, hexagon, or inset — with a live preview. Free online CSS clip-path generator.
Size: 50%
Free CSS Clip-Path Generator
Choose a shape — circle, ellipse, triangle, pentagon, hexagon, or inset — and adjust its parameters to generate a CSS clip-path value, with a live preview on a sample box.
How to Use It
Pick a shape from the toggle buttons, adjust its size or inset sliders, and watch the preview box update live. Copy the generated clip-path CSS and apply it to any element.
Example
Selecting Hexagon generates clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) — a six-sided shape carved directly out of a plain rectangular element.
Common Use Cases
- Creating a custom-shaped profile picture or badge without an image editor.
- Building angled section dividers or hero image cutouts on a landing page.
- Cropping a decorative element into a triangle, hexagon, or other polygon shape.
FAQs
Does clip-path affect the element's clickable area?
In most modern browsers, yes — clicks outside the visible clipped shape but inside the original box are not registered, so a clip-path shape is also generally its interactive hit area.
Is clip-path animatable?
Yes, when both the starting and ending values use the same clip-path function (like twopolygon() values with the same number of points) — browsers can smoothly transition between them.
Is browser support good for clip-path?
Yes — clip-path with basic shapes is supported in all modern browsers, though very old browsers may need a -webkit- prefix or lack support entirely.