Why include -webkit-clip-path?

Older WebKit browsers require the prefixed property for clip-path to work, so both lines are emitted for maximum compatibility.

CSS Clip-Path Maker

Generate CSS clip-path shapes from presets (triangle, star, hexagon, arrow and more) with a live preview. Copy the CSS.

By AbraCalc Editorial Team · Reviewed by AbraCalc Methodology Review · Last reviewed: 2026-06-26 3 sources

Preset

CSS

Pure browser JavaScript — generates CSS clip-path locally.

Embed this tool on your site

<iframe src="https://abracalc.com/app/css-clip-path-maker/" width="100%" height="640" style="border:1px solid #e6e1f0;border-radius:12px" loading="lazy"></iframe>

Cite this tool

APA

AbraCalc. (2026). CSS Clip-Path Maker [Online calculator]. Retrieved from https://abracalc.com/app/css-clip-path-maker/

BibTeX

@misc{abracalc-css-clip-path-maker, author = {AbraCalc}, title = {CSS Clip-Path Maker}, year = {2026}, howpublished = {\url{https://abracalc.com/app/css-clip-path-maker/}} }

Did this tool answer your question?

How to use this tool

Pick a shape preset from the dropdown.
Watch the live preview update.
Copy the clip-path CSS (with the -webkit- fallback included).

Generate CSS clip-path shapes from presets (triangle, star, hexagon, arrow and more) with a live preview. Copy the CSS.

How it works

The CSS Clip-Path Maker generates clip-path CSS values from a set of preset shapes including triangles, hexagons, stars, arrows, and more. Select a preset, see the live preview on a sample element, and copy the CSS property.

The clip-path property hides any part of an element that falls outside the defined shape. Everything inside the shape is visible; everything outside is clipped away. This works on images, divs, buttons, and any other HTML element.

Polygon clip paths are defined as a list of x y percentage coordinate pairs, making them resolution-independent. The same clip-path works on a 100px thumbnail and a full-screen hero image without any adjustment.

Use clip-path to create diagonal section dividers, shaped image frames, cut-corner buttons, and dynamic hover effects when combined with CSS transitions.

Worked example

Apply a hexagon frame to a profile photo

Select the Hexagon preset from the shape list.
Preview the clipped shape on the sample element.
Copy the generated clip-path CSS.
Add it to your profile image selector: .avatar { clip-path: polygon(...); }.
Ensure the image is square; non-square images will show an asymmetric hexagon.

A profile photo displayed in a hexagonal frame using pure CSS, with no image editing required.

Common mistakes to avoid

Trying to animate between shapes with different point counts — CSS can only interpolate polygon clip-paths that have the same number of coordinate pairs.
Applying clip-path to an element with box-shadow expecting the shadow to follow the clip shape; box-shadow is not clipped by clip-path (use filter: drop-shadow() instead).
Forgetting that overflow: hidden is not needed when using clip-path — the clipping already hides content outside the shape.

Key terms

clip-path: A CSS property that defines a clipping region; only the portion of an element inside the region is visible.
polygon(): A clip-path function that defines a shape as a list of percentage-based coordinate pairs.
Clipping region: The geometric area within which an element's content is visible; content outside it is hidden.

Frequently asked questions

Why include -webkit-clip-path?: Older WebKit browsers require the prefixed property for clip-path to work, so both lines are emitted for maximum compatibility.