✂️

CSS Clip-path Generator Online — 12 Presets, Copy CSS

12 CSS clip-path presets (triangle, star, hexagon, speech bubble) plus editable polygon points. Live preview, copy CSS, also supports circle/ellipse/inset. Free, no signup.

All tools

Shape presets

Polygon points (% / coords)

One point per line: x% y%

Preview

CSS

CSS clip-path crops an element to any shape. Use for hero trapezoids, star badges, speech bubbles. GPU-rendered, animatable.

What is clip-path for?

The CSS clip-path property crops an element to any shape — no SVG, no PNG. GPU-rendered, animatable.

Trapezoid hero: homepage header with a slanted bottom edge — without a background PNG.
Star badge: "NEW" star sticker on product cards.
Speech bubble: chat balloon without an inline SVG.
Hex avatar: hexagonal profile picture instead of round.
Curved sections: section dividers with a curve instead of a flat line.

Syntax

/* Polygon */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/*                  ↑ apex   ↑ bottom-left  ↑ bottom-right */

/* Circle */
clip-path: circle(50% at 50% 50%);
/*                ↑ radius ↑ center */

/* Ellipse */
clip-path: ellipse(40% 50% at 50% 50%);

/* Inset — crop inward, optional rounded corners */
clip-path: inset(10% 20% 10% 20% round 20px);
/*               ↑ top right bottom left */

Reading polygon points

Each x% y% pair is a vertex:

0% 0% = top-left
100% 0% = top-right
100% 100% = bottom-right
0% 100% = bottom-left

Points connect with straight lines in declaration order. You can use px instead of %, but % is more responsive.

Browser support

polygon, circle, ellipse, inset: all modern browsers since 2017.
path() (SVG path): Chrome 88+, Firefox 97+. Need fallback for older Safari.
shape() (CSS Shapes 2): Chrome 130+ only, Firefox flagged. Don't use in production yet.

Tips

Animatable: transition: clip-path 0.3s ease; — smooth shape morph on hover.
Works on background / gradient: clip-path crops the entire box including its background — pair with linear-gradient for eye-catching CTAs.
Watch overflow: clipped pixels still occupy layout space — the box doesn't shrink.
Avoid clipping text: cut text becomes hard to read; clip backgrounds and images only.

FAQ

How does clip-path differ from mask?

clip-path crops by vector shape (polygon, circle) — pixels are either fully in or fully out. mask uses a greyscale image as an opacity layer, allowing soft gradient fades. clip-path is lighter (better GPU acceleration); mask is more flexible but heavier.

Does clip-path work in mobile Safari?

Yes. All modern browsers (Safari 11.1+, Chrome 55+, Firefox 54+, Edge 79+) support polygon, circle, ellipse, and inset. path() has limits in older Safari (full support from 16+). Over 97% of global users can render it.

Can I animate clip-path smoothly?

Yes, but with a constraint: the two keyframes must have the SAME number of polygon points. Animating from a triangle (3 points) to a square (4 points) jitters. Workaround: add duplicate points to the triangle so both have 4. Circle and ellipse animations don't have this issue.

Why does polygon use % instead of px?

% is responsive to element size — the shape scales with the box. px is best when the element has a fixed size. Best practice: use % for hero/section curves, use px for fixed-size icons or badges.

shape() vs path() — what's the difference?

path() uses SVG path syntax (M, L, C, Z) — verbose but very powerful. shape() (CSS Shapes 2, new in Chrome 130+) uses syntax close to polygon but allows curves. As of 2026, shape() doesn't have wide enough browser support for production. This tool doesn't expose it yet.