CSS Clip Path Generator
What clip-path does
The clip-path property hides everything outside a shape you define, cutting an element into a polygon, circle, ellipse or rounded rectangle. The element keeps its original box for layout purposes — only what is painted gets clipped.
Syntax
clip-path: polygon(<x> <y>, <x> <y>, …);| Part | What it controls |
|---|---|
| polygon() | A list of x y pairs, each a corner of the shape, in order. Percentages resolve against the element's own width and height. |
| circle() | A radius and an optional at <position> centre — circle(40% at 50% 50%). |
| ellipse() | Separate horizontal and vertical radii, for ovals that follow a non-square element. |
| inset() | Insets from each edge with an optional round <radius>, which is the one clip shape that can have rounded corners. |
| fill rules | polygon() accepts nonzero or evenodd as a first argument, which decides how self-intersecting paths are filled. |
Notes from practice
Layout does not change
A clipped element still occupies its full original box. Text beside it will not flow into the cut-away area — that is shape-outside, a different property.
Percentages keep shapes responsive
Pixel coordinates break the moment the element resizes. Build polygons entirely in percentages and the shape survives every breakpoint.
It can be animated between matching shapes
Two polygons with the same number of points interpolate smoothly, so a transition between them is possible. Different point counts will not animate.
CSS Clip Path Generator FAQ
How do I cut an element into a shape with CSS?
Use clip-path with a shape function, for example clip-path: polygon(50% 0%, 100% 100%, 0% 100%) for a triangle. Everything outside the shape stops being painted, while the element keeps its original size in the layout.
How do I make a diagonal section divider in CSS?
Clip the section with a four-point polygon where the top two or bottom two points sit at different heights, such as polygon(0 0, 100% 4vh, 100% 100%, 0 100%). Using viewport or percentage units keeps the angle consistent as the screen changes.
What is the difference between clip-path and mask?
clip-path cuts along a hard geometric edge — a pixel is either shown or not. A mask uses an image or gradient's alpha channel, so it can fade gradually. Use clip-path for shapes and mask for soft fades.
Can clip-path have rounded corners?
Only through inset(), which accepts a round keyword: clip-path: inset(10% round 24px). The polygon, circle and ellipse functions have no corner rounding, so complex rounded shapes usually need an SVG path instead.
Can you animate clip-path?
Yes, between shapes of the same type with the same number of points. Two polygons with four points each will transition smoothly; adding a point partway through will not animate and snaps instead.
Related generators
- CSS Mask — Fade, spotlight or pattern an element away with gradient masks. Opaque pixels show, transparent pixels hide.
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
- Filter — Combine blur, colour adjustments and drop-shadow on any element. Defaults are left out of the output.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.