What clip-path syntax does this use?

It generates the polygon() function with percentage coordinates, for example polygon(50% 0%, 100% 100%, 0% 100%) for a triangle.

How many vertices can a shape have?

A polygon needs at least three vertices. You can add as many as you like to create complex custom outlines.

Is anything uploaded?

No — the shape preview and CSS are generated entirely in your browser.

How do polygon percentage coordinates work?

Each vertex is an x% y% pair measured from the top-left of the element's box. 0% 0% is the top-left corner, 100% 0% the top-right, 100% 100% the bottom-right and 0% 100% the bottom-left. The visible area is whatever the points enclose.

Does clip-path change the element''s layout size?

No. clip-path only controls which parts are painted; the element still occupies its full box for layout, hover and click purposes. Clipped-away regions become transparent but the element's width and height are unchanged.

Can I animate or transition a clip-path?

Yes, as long as both shapes are polygon() with the same number of points. The browser interpolates each vertex, so you can transition between two matching polygons for reveal and morph effects.

Why does my clipped element have hard, slightly jagged edges?

clip-path edges are not anti-aliased as smoothly as borders on some browsers. For softer edges, slightly reduce the contrast at the boundary or pair the shape with a subtle drop-shadow filter rather than a box-shadow, which clip-path also cuts.

What is the CSS Clip-Path Generator?

Free CSS clip-path generator using the polygon() function. Pick a preset shape or drag vertices to craft triangles, hexagons, arrows and stars, then copy the clip-path property. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Clip-Path Generator

Name: CSS Clip-Path Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

CSS clip-path generator

This tool builds CSS clip-path: polygon(...) shapes visually and gives you the exact value to paste into your stylesheet. It is for developers cutting elements into triangles, hexagons, arrows, stars and custom outlines for badges, section dividers and decorative images. Start from a preset, drag the vertices, and copy.

How it works

The CSS clip-path property with the polygon() function clips an element to the area enclosed by a list of vertices. Each vertex is an x% y% pair measured from the top-left corner of the element’s box: 0% 0% is top-left and 100% 100% is bottom-right. The generator stores your points, joins them as x% y% pairs, and outputs polygon(p1, p2, …). A checkerboard background behind the preview shows which regions are clipped away (transparent) versus kept. You can pick a preset, edit any vertex’s coordinates, or add and remove points for a custom polygon (a minimum of three is required).

Preset shapes

Shape	polygon() points	Common use
Triangle (up)	`50% 0%, 100% 100%, 0% 100%`	Section dividers, arrows
Rhombus	`50% 0%, 100% 50%, 50% 100%, 0% 50%`	Decorative diamonds, tags
Pentagon	`50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%`	Badges
Hexagon	`25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%`	Profile images, icons
Arrow right	`0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%`	Navigation tabs, breadcrumbs
Star (6-point)	multiple alternating inner/outer vertices	Ratings, achievement icons

Practical techniques

Section wave dividers. Many modern page layouts use a clipped <div> as a visual separator between sections. A parallelogram (0% 0%, 100% 0%, 100% 80%, 0% 100%) creates a slanted edge where one section meets the next. Stack a clipped element over the section below it and match its fill colour to the section above.

Profile image frames. Apply clip-path to an <img> element directly. A hexagon clip creates the popular geometric avatar frame used in many design systems. Because clip-path preserves the element’s layout box, the surrounding text flow is unaffected.

Animated shape morphing. Two polygon() values with the same number of points can be transitioned smoothly. A button that morphs from a rectangle to a chevron on hover creates a memorable interaction without any JavaScript. Keep the point count identical between start and end states — the browser interpolates each vertex pair independently.

.shape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* rectangle */
  transition: clip-path 300ms ease;
}
.shape:hover {
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); /* arrow */
}

Common gotchas

clip-path clips box-shadow too. If your design needs a shadow on a clipped element, use filter: drop-shadow() instead — it follows the painted outline rather than the element’s box.
Clipped regions become transparent but remain in the event-handling box. A clipped-away triangle corner still receives clicks. Use pointer-events: none on a wrapping element if this causes issues.
Some older browsers require a -webkit-clip-path prefix. Modern Chrome, Firefox and Safari all support the unprefixed property.

Everything runs locally in your browser — nothing is uploaded.