CSS Clip Path Generator

About CSS Clip Path Generator

How the clip-path Shape Functions Work

Each shape function takes a set of numeric arguments and produces a clipping region inside the element's reference box (border-box by default). Coordinates can be lengths (px, rem) or percentages relative to the box, and percentages make the shape responsive as the element resizes.

Function	Syntax	What It Does
polygon()	polygon(<fill-rule>? x1 y1, x2 y2, ...)	Creates a shape from connected points. Optional fill-rule is nonzero (default) or evenodd.
circle()	circle(radius at cx cy)	Circular clip with a centre position. Radius can be a length, percentage, or closest-side/farthest-side keyword.
ellipse()	ellipse(rx ry at cx cy)	Oval clip with horizontal and vertical radii.
inset()	inset(top right bottom left round radius)	Rectangular clip with adjustable insets from each edge and optional rounded corners.
path()	path("M 0 0 L 100 0 ...")	Accepts raw SVG path syntax. Supports curves and arcs but uses absolute pixel units only.
shape()	shape(from x y, line to x y, ...)	Per the Chrome for Developers blog, a newer CSS-native equivalent of path() that accepts percentages and CSS units for responsive curves. Cross-browser since early 2026.

Worked example: The pentagon preset outputs clip-path: polygon(50% 0%, 100% 38%, 19% 100%, 0% 38%, 81% 100%);. Each pair is an x,y coordinate as a percentage of the box. Point 1 is the top apex (50% across, 0% down), point 2 is the upper-right (100%, 38%), and so on. Because the coordinates are percentages, the same CSS renders a scaled pentagon on a 100x100 avatar, a 400x300 card, or a full-width hero.

Common Polygon Shapes

The preset buttons load these shapes as starting points. You can drag any point afterwards to customise.

Shape	Points	CSS
Triangle	3	polygon(50% 0%, 100% 100%, 0% 100%)
Diamond	4	polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Pentagon	5	polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%)
Hexagon	6	polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Chevron	6	polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%)
Arrow right	7	polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
Star	10	Alternating inner and outer radii around a centre point
Cross	12	polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%)

Most decorative shapes can be built from 3 to 12 points. Stars and gears may need 16-24. Beyond that, the shape() or path() functions are more practical than hand-placing coordinates.

When Should You Use clip-path vs border-radius?

Use border-radius for rounded corners on rectangles. Use clip-path when you need non-rectangular shapes like triangles, hexagons, stars, diagonal edges, or custom paths. The key behavioural differences matter for layout and interaction.

Concern	clip-path	border-radius
Shape variety	Any shape - polygons, circles, custom outlines	Rounded rectangles, circles, ellipses only
Content outside shape	Completely hidden (clipped)	Still present, visible at corners unless overflow: hidden
Layout box	Element still occupies full rectangle for layout	Element still occupies full rectangle
Clickable area	Only the clipped region receives pointer events	Full rectangle remains interactive
Box shadow	Shadow follows the rectangular box, not the clip (use drop-shadow filter instead)	Shadow follows the rounded corners
Performance	Hardware-accelerated in modern browsers	Hardware-accelerated
Animation	Interpolates between shapes with matching function and point count	Easily animatable

A common mistake is expecting a drop shadow to follow the clipped silhouette. It will not - box-shadow traces the element's geometric box. To cast a shadow along a clipped shape, apply filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)) to a wrapping element instead. The CSS Box Shadow Generator covers the rectangular shadow case.

Practical Uses for clip-path

Use Case	Shape	Notes
Hero section divider	Angled polygon	Clip the bottom of a hero with polygon(0 0, 100% 0, 100% 90%, 0 100%) for a diagonal edge
Image masks	Circle, polygon, custom	Crop photos into non-rectangular frames without editing the source file
Reveal animations	circle() growing from 0%	Animate the radius from 0 to 100% for a spotlight reveal
Card corner cuts	Polygon with notched corners	Cyberpunk or ticket-stub card designs
Page transitions	Inset or polygon wipe	Used on award-winning sites like Apple product pages for scroll-driven section reveals
Scroll-triggered reveals	inset() changing values	Animate inset from the edges inward to reveal content
Avatar shapes	Hexagon, squircle	Distinctive profile pictures without SVG masking overhead

In the real world, clip-path is most commonly used for diagonal section dividers (the "angled hero" look popularised by startup marketing sites around 2017 and still in active use) and for decorative image masks. Geometric shapes like hexagons for team member avatars are another recurring pattern.

Animating clip-path

The browser interpolates clip-path values smoothly when both keyframes use the same shape function and, for polygon(), the same point count. Use a simple CSS transition:

.card { clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s ease; }
.card:hover { clip-path: circle(100% at 50% 50%); }

This creates a radial reveal on hover. For polygon animations, pad the smaller shape with duplicate points so both states have the same count - otherwise the shape snaps instead of tweening. The newer shape() function handles this automatically and can interpolate between curves, lines, and arcs, which is why Chrome's CSS team positions it as the replacement for path() going forward (per developer.chrome.com, 2025).

Browser Support and Fallbacks

Per caniuse.com, clip-path with basic shapes has over 97% global support as of April 2026. Chrome, Firefox, Safari, and Edge all support polygon(), circle(), ellipse(), and inset() without prefixes on current versions. Safari historically needed -webkit-clip-path; modern Safari accepts the unprefixed property, but shipping both is still the safest pattern for older installs:

-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

The shape() function reached cross-browser support in Chrome 139 (early 2026) and Firefox ships it in the current stable channel. For broader reach, path() remains the fallback for complex curves. For rounded rectangles without clipping, use the CSS Border Radius Generator.

The Reference Box: border-box, padding-box, and Beyond

By default, clip-path measures percentages against the element's border-box. You can change this by adding a geometry keyword after the shape function, which becomes important when the element has padding or border widths that affect the visible area:

clip-path: circle(50% at center) padding-box;

The five accepted reference boxes are margin-box, border-box (default), padding-box, content-box, and fill-box (for SVG elements). A 50% circle in a 200px-wide box with 20px padding produces a different visual radius under padding-box than under border-box - the padding-box version is centred on a 160px region. This is rarely needed for straightforward UI work but becomes essential when clipping elements that have thick borders or decorative padding. The MDN specification documents this as the <geometry-box> component of the property grammar.

Performance Considerations

clip-path is GPU-accelerated in Chrome, Safari, and Firefox for basic shapes, making it cheap to animate at 60fps on modern devices. A 2024 analysis by the Chrome DevTools team showed that clip-path transitions on polygons under 20 points stay well under the 16ms frame budget on mid-range mobile hardware. However, animating clip-path with path() or very complex polygons (50+ points) can drop frames on low-end Android devices - profile with the Rendering tab in DevTools if you hit this ceiling. For heavy reveal effects, consider mask-image as an alternative: it can leverage cached bitmap masks where clip-path recomputes on every frame.

Common Mistakes and Gotchas

Several issues trip up developers new to clip-path:

• Shadows disappearing. box-shadow is clipped along with the element. Move the shadow to a wrapping div as a drop-shadow filter.
• Hover states on notched corners. The clicked corner is hidden but still in the layout. Users can hover "empty space" and trigger the element. Combine with pointer-events: none on the wrapper if this matters.
• Animating polygon with different point counts. The browser cannot tween 4 points into 6 - the shape jumps. Pad both states to the same count.
• path() not scaling. path() coordinates are pixels, not percentages. Use shape() for responsive curves.
• clip-path on fixed-position elements. Before Safari 16, clip-path on position: fixed elements inherited the viewport as the reference box unexpectedly. Test on older iOS if your audience skews that way.
• Text selection beyond the clip. Selected text can extend outside the visible shape because the text nodes still exist at full size. Consider overflow: hidden on the parent to contain selection highlights.

For layered depth effects behind clipped shapes, pair this with the CSS Box Shadow Generator on a wrapper. Everything on this page runs in your browser; no CSS is uploaded anywhere.

Sources

• MDN Web Docs - clip-path
• Can I Use - CSS clip-path
• Chrome for Developers - Use shape() for responsive clipping
• MDN - polygon() function
• web.dev - Paths, shapes, clipping, and masking
• W3C - CSS Shapes Module Level 2