How many polygon points can I use?

Between 3 and 12. The remove buttons disable at three because fewer would not enclose an area, and Add point disables at twelve.

Are coordinates clamped?

Yes. Each polygon coordinate is limited to 0 through 100 percent, so points cannot go outside the element's box in this tool.

What are circle radius percentages relative to?

For a circle, CSS resolves a percentage radius against the square root of half the sum of the squared width and height, not against width or height directly. On a non-square box a 50 percent radius is therefore not half the width.

Does the output include a -webkit- prefix?

No. It prints the standard clip-path property only, which current browsers support, so add a prefixed line yourself if you target very old Safari.

Does clipping change where clicks land?

Yes. Pointer events are ignored outside the clipped shape, which is handy for angled buttons but worth remembering for hit targets.

Design toolsInstantPrivateNo account

CSS Clip-path Generator

Cut an element into a polygon, circle, ellipse or inset rectangle and copy the resulting clip-path line.

Back to category

About CSS clip-path generator

Cut an element into a polygon, circle, ellipse or inset rectangle and copy the resulting clip-path line. Polygon mode lets you type each vertex as a pair of percentages and load four starting shapes. It is meant for developers who need angled section edges, arrow badges or custom image masks.

How to use it

Select Polygon, Circle, Ellipse or Inset on the Mode tabs.
For Polygon, click Triangle, Diamond, Pentagon or Arrow, or edit the numeric X and Y fields for each point. Use Add point to insert another vertex and the X button to remove one.
For Circle and Ellipse, set the radii and the center X and Y percentages.
For Inset, set Top, Right, Bottom and Left distances in pixels and an optional Round value.
Press Copy CSS.

The Arrow preset

Input

Polygon mode, Arrow

Output

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

When to use it

Giving a hero section a diagonal bottom edge without an image.
Cropping a profile photo to a circle or a rounded rectangle in CSS.
Building a ribbon or arrow-shaped tag from a plain div.
Revealing part of an image with an inset clip that you can later animate.

Questions about CSS clip-path generator

How many polygon points can I use?: Between 3 and 12. The remove buttons disable at three because fewer would not enclose an area, and Add point disables at twelve.
Are coordinates clamped?: Yes. Each polygon coordinate is limited to 0 through 100 percent, so points cannot go outside the element's box in this tool.
What are circle radius percentages relative to?: For a circle, CSS resolves a percentage radius against the square root of half the sum of the squared width and height, not against width or height directly. On a non-square box a 50 percent radius is therefore not half the width.
Does the output include a -webkit- prefix?: No. It prints the standard clip-path property only, which current browsers support, so add a prefixed line yourself if you target very old Safari.
Does clipping change where clicks land?: Yes. Pointer events are ignored outside the clipped shape, which is handy for angled buttons but worth remembering for hit targets.

Related tools

Design toolsInstantPrivateNo account

CSS Clip-path Generator

Cut an element into a polygon, circle, ellipse or inset rectangle and copy the resulting clip-path line.

Back to category

WorkbenchClient-side · Private

About CSS clip-path generator

How to use it

Select Polygon, Circle, Ellipse or Inset on the Mode tabs.
For Polygon, click Triangle, Diamond, Pentagon or Arrow, or edit the numeric X and Y fields for each point. Use Add point to insert another vertex and the X button to remove one.
For Circle and Ellipse, set the radii and the center X and Y percentages.
For Inset, set Top, Right, Bottom and Left distances in pixels and an optional Round value.
Press Copy CSS.

The Arrow preset

Input

Polygon mode, Arrow

Output

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

When to use it

Giving a hero section a diagonal bottom edge without an image.
Cropping a profile photo to a circle or a rounded rectangle in CSS.
Building a ribbon or arrow-shaped tag from a plain div.
Revealing part of an image with an inset clip that you can later animate.

Questions about CSS clip-path generator

How many polygon points can I use?: Between 3 and 12. The remove buttons disable at three because fewer would not enclose an area, and Add point disables at twelve.
Are coordinates clamped?: Yes. Each polygon coordinate is limited to 0 through 100 percent, so points cannot go outside the element's box in this tool.
What are circle radius percentages relative to?: For a circle, CSS resolves a percentage radius against the square root of half the sum of the squared width and height, not against width or height directly. On a non-square box a 50 percent radius is therefore not half the width.
Does the output include a -webkit- prefix?: No. It prints the standard clip-path property only, which current browsers support, so add a prefixed line yourself if you target very old Safari.
Does clipping change where clicks land?: Yes. Pointer events are ignored outside the clipped shape, which is handy for angled buttons but worth remembering for hit targets.

Search tools

CSS Clip-path Generator

About CSS clip-path generator

How to use it

The Arrow preset

When to use it

Questions about CSS clip-path generator

How many polygon points can I use?

Are coordinates clamped?

What are circle radius percentages relative to?

Does the output include a -webkit- prefix?

Does clipping change where clicks land?

Related tools

CSS Clip-path Generator

About CSS clip-path generator

How to use it

The Arrow preset

When to use it

Questions about CSS clip-path generator

How many polygon points can I use?

Are coordinates clamped?

What are circle radius percentages relative to?

Does the output include a -webkit- prefix?

Does clipping change where clicks land?

Related tools