How do I make a hexagon with CSS clip-path?

Use polygon() with six points: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). The Hexagon preset on the polygon tab writes it, and the Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon and Star presets write theirs the same way.

What do the numbers in a clip-path polygon mean?

Each pair is an x and a y measured from the top-left corner of the reference box, which is the border box when none is named (MDN, CSS Shapes). So 0% 0% is the top-left corner and 100% 100% the bottom-right. This tool takes percentages only, at least three points, and allows minus signs and decimals, so -10% 0% is accepted and puts a point outside the box. Where the outline crosses itself, the Fill rule decides what is filled: Nonzero (the CSS default) keeps a crossed star solid, and Even-odd writes polygon(evenodd, ...) and leaves the crossed middle empty.

What do circle(), ellipse() and inset() take?

circle(R% at X% Y%) takes a radius and a center, ellipse(RX% RY% at X% Y%) two radii and a center, and inset(T% R% B% L% round r%) the distance each edge moves in, with an optional corner radius. The tool starts at circle(50% at 50% 50%), ellipse(25% 50% at 50% 50%) and inset(10% 10% 10% 10% round 0%). Its fields run from 0 to 100%, and rounding from 0 to 50%. Individual corner rounding writes four values in the order top left, top right, bottom right, bottom left.

How do I use clip-path in Tailwind CSS?

Pick the Tailwind format. It writes an arbitrary property, [clip-path:circle(50%_at_50%_50%)], where each underscore stands for a space (Tailwind docs). The class keeps the shape function you chose, so a circle stays a circle() and an inset stays an inset().

Can I drag the polygon points?

Yes. Drag a point on the preview (hold Shift for tenths of a percent), or focus it and press the arrow keys to move it 1%, or 10% with Shift. Delete removes the focused point, down to three. Click the small dot in the middle of an edge to add a point there, up to 24: on the Triangle, the dot between the first two points gives 50% 0%, 25% 50%, 0% 100%, 100% 100%. Every change is written back to the Custom Points box.

Does the Animate switch put an animation in my CSS?

No. Animate adds a 500 ms transition to the preview only, so the shape glides as you move a slider. The copied code holds the clip-path declaration and nothing else. MDN lists clip-path as animatable between basic shapes, but you write the transition yourself.

CSS Clip Path Generator

Write clip-path circle(), ellipse(), inset() or polygon() code from sliders, typed points or points you drag, then copy it as CSS, SCSS, React or Tailwind. How it works

Animate

Preview on your own photo

The photo is shown on this page only; it is not uploaded.

Load an existing clip-path

Radius (50%)

Center X (50%)

Center Y (50%)

About the CSS Clip Path Generator

clip-path: circle(50% at 50% 50%) shows a circle centered in the element and hides everything outside it; on a square element it touches all four edges. This clip-path generator writes circle(), ellipse(), inset() and polygon() from sliders, typed percentages, points dragged on the preview and seven polygon presets, shows the shape on a gradient, solid or checkerboard preview or on your own photo, and copies it as CSS, SCSS, a React style or a Tailwind class. It can also load a clip-path you paste and write the even-odd fill rule.

Polygon presets and their points

Preset	Points	polygon() value
Triangle	3	polygon(50% 0%, 0% 100%, 100% 100%)
Trapezoid	4	polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
Parallelogram	4	polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
Rhombus	4	polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Pentagon	5	polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
Hexagon	6	polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Star	10	polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)

Each value is what the preset button puts in the Custom Points box, checked by the same rule that checks typed points. Every point is measured from the top-left corner of the element.

What the Custom Points box does with typed text

Typed points	Result
50% 0%, 0% 100%, 100% 100%	Accepted as 50% 0%, 0% 100%, 100% 100%
50% 0%, 100% 100%	A polygon needs at least three points.
50 0, 10% 10%, 1% 1%	Point 1 must be an x and a y, both in percent, such as 50% 0%.
50% 0%,, 1% 1%	A point is empty. Separate points with commas.
-10% 0%, 110% 0%, 50% 100%	Accepted as -10% 0%, 110% 0%, 50% 100%

When the text is refused, the preview and the code keep the last valid points.

How to use this tool

Pick circle, ellipse, inset or polygon.
Move the sliders or type a number from 0 to 100 (rounding from 0 to 50). A number outside its range shows a message and changes nothing.
For a polygon, choose a preset, set a point count from 3 to 12, type points as percentages, such as 50% 0%, 100% 100%, 0% 100%, or drag the points on the preview.
To change a clip-path you already have, paste it into Load an existing clip-path and press Load into controls: clip-path: inset(10% round 20%); sets all four insets to 10% and the rounding to 20%.
Pick CSS, SCSS, React or Tailwind and copy the code.

Frequently asked questions

How do I make a hexagon with CSS clip-path?: Use polygon() with six points: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). The Hexagon preset on the polygon tab writes it, and the Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon and Star presets write theirs the same way.
What do the numbers in a clip-path polygon mean?: Each pair is an x and a y measured from the top-left corner of the reference box, which is the border box when none is named (MDN, CSS Shapes). So 0% 0% is the top-left corner and 100% 100% the bottom-right. This tool takes percentages only, at least three points, and allows minus signs and decimals, so -10% 0% is accepted and puts a point outside the box. Where the outline crosses itself, the Fill rule decides what is filled: Nonzero (the CSS default) keeps a crossed star solid, and Even-odd writes polygon(evenodd, ...) and leaves the crossed middle empty.
What do circle(), ellipse() and inset() take?: circle(R% at X% Y%) takes a radius and a center, ellipse(RX% RY% at X% Y%) two radii and a center, and inset(T% R% B% L% round r%) the distance each edge moves in, with an optional corner radius. The tool starts at circle(50% at 50% 50%), ellipse(25% 50% at 50% 50%) and inset(10% 10% 10% 10% round 0%). Its fields run from 0 to 100%, and rounding from 0 to 50%. Individual corner rounding writes four values in the order top left, top right, bottom right, bottom left.
How do I use clip-path in Tailwind CSS?: Pick the Tailwind format. It writes an arbitrary property, [clip-path:circle(50%_at_50%_50%)], where each underscore stands for a space (Tailwind docs). The class keeps the shape function you chose, so a circle stays a circle() and an inset stays an inset().
Can I drag the polygon points?: Yes. Drag a point on the preview (hold Shift for tenths of a percent), or focus it and press the arrow keys to move it 1%, or 10% with Shift. Delete removes the focused point, down to three. Click the small dot in the middle of an edge to add a point there, up to 24: on the Triangle, the dot between the first two points gives 50% 0%, 25% 50%, 0% 100%, 100% 100%. Every change is written back to the Custom Points box.
Does the Animate switch put an animation in my CSS?: No. Animate adds a 500 ms transition to the preview only, so the shape glides as you move a slider. The copied code holds the clip-path declaration and nothing else. MDN lists clip-path as animatable between basic shapes, but you write the transition yourself.

Important limitations

The tool writes four of the shapes clip-path accepts; path(), rect(), xywh(), shape() and a url() reference are not generated. Points are percentages only, with no px values. Load into controls reads circle(), ellipse(), inset() and polygon() written in percentages, with position keywords such as top left and an evenodd or nonzero rule; path(), url(), calc(), px values and closest-side are refused with a message. A photo you preview on is read in your browser, is not uploaded and is not kept. Dragged points stay on the element, 0 to 100%, and the editor holds 3 to 24 points; moving the point-count slider replaces the points with evenly spaced ones on a circle. The preview is drawn by your own browser, so it shows what that browser supports. On a phone the preview is square, so it cannot show how a circle() percentage behaves on a wide element; a larger screen shows a wide preview. Nothing is saved between visits.

Sources

Last reviewed: 2026-10-22

Round avatars, slanted banners and hexagon cards

Cut an avatar into a circle, a hero image into a slanted band or a card into a hexagon without editing the image. Pick the shape, set the numbers, check the result on a gradient, solid or checkerboard background or on a photo of your own (not uploaded), and copy it as CSS, SCSS, a React style or a Tailwind class. The polygon shape also takes a point count from 3 to 12, seven presets (Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon, Hexagon and Star) and your own points, typed as percentages or dragged on the preview. Paste an existing clip-path, such as inset(10% round 20%), and Load into controls sets the sliders from it.

The wide desktop preview shows one surprise. A circle() percentage is measured against the box diagonal divided by √2, so on a 400 × 200 px element circle(50%) has a radius of about 158 px and is cut flat at the top and bottom. Use ellipse(50% 50% at 50% 50%) to fill a rectangle edge to edge, or about 31.6% for a circle touching the top and bottom.

How the shape is written

clip-path: circle(R% at X% Y%)

Everything outside the shape is hidden. The other three are ellipse(RX% RY% at X% Y%), inset(T% R% B% L% round r%) and polygon(x1% y1%, x2% y2%, ...), and percentages are measured on the element's border box. Values run from 0 to 100% (rounding 0 to 50%); a number outside its range changes nothing.

Example: the Hexagon preset is clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);, and its Tailwind form is [clip-path:polygon(25%_0%,_75%_0%,_100%_50%,_75%_100%,_25%_100%,_0%_50%)], because Tailwind reads an underscore as a space.

A polygon is filled with the nonzero rule unless another is named, so a five-point star drawn with crossing lines stays solid in the middle. Even-odd writes polygon(evenodd, ...) and makes that centre a hole.

Fun Fact: clip-path takes more shapes than this tool writes: MDN also lists path(), rect(), xywh() and shape().

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.