CSS Clip Path Generator

Working with the Clip-Path Maker

1. Pick a preset shape from the row at the top - circle, ellipse, triangle, pentagon, hexagon, octagon, star, cross, arrow - or choose "Custom polygon" to start from a blank vertex list.
2. Drag the control points directly on the preview surface. Each handle corresponds to a vertex in the underlying polygon() or circle() function, and coordinates are expressed as percentages of the element\'s reference box.
3. Fine-tune numerically using the inputs under the preview. Type exact values when you need a precise shape that aligns to other elements on your page.
4. Toggle the reference box (border-box, padding-box, content-box) to see how the same percentages produce different clip regions depending on where the "0% 0%" origin lives.
5. Copy the generated CSS. The output is a single clip-path declaration that works inline, in a stylesheet, or via CSS-in-JS.

Under the hood: how clip-path clips

The clip-path property comes from CSS Masking Module Level 1. It accepts a basic shape function - circle(), ellipse(), polygon(), inset(), path(), or the newer shape() - or a reference to an SVG <clipPath> via url(). At paint time the browser computes the shape against the element\'s reference box and discards any pixel outside that region. Everything inside the shape renders normally; everything outside is simply not painted - hit-testing, pointer events, and selection all follow the clipped outline.

Internally, Chromium and WebKit treat clip-path as a stencil applied during the compositor pass, which is why it\'s cheap to animate and doesn\'t force a layout. Gecko takes a similar path via WebRender. The performance-hot case is clip-path: path() with thousands of Bezier segments, or URL-referenced SVG clips on large elements, both of which fall off the fast path. Basic shapes stay GPU-accelerated regardless of element size, so a polygon over the whole viewport is still cheap.

Where clip-path earns its keep

• Angled section dividers - slanted tops and bottoms on hero sections without SVG backgrounds.
• Diagonal image masks for magazine-style editorial layouts.
• Hexagonal avatar grids for team pages or gaming-inspired UIs.
• Reveal animations that expose content by animating a circle\'s radius from 0 to 100%.
• Decorative callouts - speech bubbles, arrow-tipped ribbons, ticket-stub badges.
• Focus spotlights that darken the page except for a ring around a highlighted onboarding target.

Pitfalls that cost time

• Child overflow is clipped too. Anything extending past the clip path - tooltips, dropdowns, focus rings - will be cut off. Plan the layout so these live in a sibling element, not inside the clipped one.
• Interactive regions shrink. The hit-test area matches the clipped shape. A button with a clip-path has a smaller clickable region than its bounding box suggests, which can surprise users who aim at the corner.
• Animating polygon() requires matching vertex counts. CSS can only interpolate between two polygon() values if both have the same number of points. For morphing between shapes with different vertex counts, add redundant collinear points to pad the shorter list.
• Focus outlines may be clipped. Browser default :focus-visible outlines sit just outside the border box. If clip-path removes that region, keyboard users lose the visible focus indicator - add a custom inner focus style.
• Safari older than 13.1 needed -webkit-clip-path as a fallback. Modern builds accept the unprefixed property; caniuse.com/css-clip-path shows the full compatibility matrix.
• percentages resolve against the reference box, not the viewport. A responsive element with a polygon clip will reshape as it resizes, which is usually desirable but can distort carefully designed angles.

Spec and formal background

CSS Masking Module Level 1 defines the current clip-path property alongside the related mask-* family. Before this spec, clipping was only available via SVG\'s <clipPath> element applied to SVG content - CSS clip-path generalized the idea to any HTML element. The basic-shape functions come from CSS Shapes Module Level 1, which originally defined them for float wrapping (shape-outside) and then got adopted for clipping. Level 4 of CSS Shapes is now adding shape(), a Bezier-capable successor to polygon(), which is shipping in Chrome 132+ and will eventually replace most path() uses. For the deprecated clip property - which only supported rect() - stop using it; it was formally deprecated in CSS Masking Level 1 and will warn in modern DevTools.

Clip-path vs masking vs SVG

Three similar-looking techniques solve overlapping problems. clip-path gives you a hard-edged binary clip - a pixel is either shown or hidden. mask-image gives you soft, per-pixel alpha via any image or gradient, which is what you want for feathered edges, radial vignettes, or texture masks. SVG <clipPath> referenced via url() is the most powerful option - it supports arbitrary Bezier curves and can use clipPathUnits="objectBoundingBox" for reusable shapes - but you ship markup along with the CSS. Rules of thumb: basic polygon or circle = CSS clip-path; soft-edged fade = mask-image with a gradient; complex curved outline = SVG <clipPath>. Compared to drawing a masked image in Figma and exporting a PNG with baked-in transparency, CSS clipping is responsive, themeable, and weighs zero bytes extra. Where it still loses: per-element filters applied after clipping sometimes paint around the clipped area on Safari, and printing clip-path is unreliable across PDF rendering engines.