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

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