CSS Clip Path Generator: Free Shape Maker

A CSS clip path generator lets you build a shape visually and copy the finished clip-path declaration. Pick polygon, circle, ellipse or inset, move the sliders or choose a preset such as hexagon or star, watch the live preview, then paste the CSS onto any image, div or video. It is free and needs no sign-in.

What Is CSS clip-path?

CSS clip-path is a property that hides everything outside a shape you define, so a plain rectangle can look like a hexagon, a circle or an arrow. The element keeps its original box in the page layout, but only the area inside the shape is painted and responds to clicks.

The property accepts basic shape functions. This generator covers four of them:

• polygon() joins a list of x and y coordinate pairs with straight lines. Triangles, stars and chevrons are all polygons.
• circle() takes a radius and a center point, for example circle(40% at 50% 50%).
• ellipse() takes a horizontal radius and a vertical radius, so the shape can be wide or tall.
• inset() pulls the visible area in from each edge of the box, with an optional round value for curved corners.

The values this tool writes are percentages of the element's own width and height. In a polygon, 0% 0% is the top-left corner and 100% 100% is the bottom-right corner. Because percentages follow the element, the shape stretches and shrinks with it.

How to Use the CSS Clip Path Generator

You can go from a blank preview to copyable code in under a minute. The preview updates every time you change a control, so you always see exactly what the CSS will do.

1. Open the Shape dropdown and choose Polygon, Circle, Ellipse or Inset.
2. For a polygon, click one of the Preset Polygons buttons: Triangle, Pentagon, Hexagon, Star, Arrow, Chevron or Parallelogram.
3. For a circle, drag Radius, Center X and Center Y. Radius runs from 10% to 100%, and the center can sit anywhere from 0% to 100%.
4. For an ellipse, drag Radius X and Radius Y. They start at 50% and 30%, which gives a wide oval centered in the box.
5. For an inset, set Top, Right, Bottom and Left (each 0% to 50%), then add Border Radius if you want rounded corners.
6. Change Preview Color to see the shape against a color close to your design. This only affects the preview.
7. Press Copy under Generated CSS. The button briefly reads Copied! and the full declaration is on your clipboard.

Paste the declaration into a rule for the element you want to shape. The preview is a plain colored box, so your own image or content will show through the same shape once the CSS is applied.

Worked Examples With Real Numbers

Each example below shows the setting you choose, the CSS the tool writes and what it does to a real element.

Example 1: a hexagon avatar

Choose Polygon, then click Hexagon. The Generated CSS reads clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. On a 200 by 200 pixel profile photo, the top edge runs from 50px to 150px across, and the left and right points sit at mid-height. The result is a flat-topped hexagon.

Example 2: a rounded crop with inset

Choose Inset and set Top, Right, Bottom and Left to 10%, with Border Radius at 20%. The output is inset(10% 10% 10% 10% round 20%) inside the clip-path declaration. On a 300 by 200 pixel card, that trims 30px from the left and right and 20px from the top and bottom, leaving a 240 by 160 pixel visible area with soft corners.

Example 3: why a circle can look wrong

Choose Circle and keep Radius at 50%. On a square element this gives a perfect inscribed circle. On a 400 by 200 pixel element, the browser measures a circle percentage against a blend of width and height, which works out to a radius of about 158px. The circle is wider than the box is tall, so the top and bottom stay flat while the sides curve. If you want a true oval, use Ellipse instead, or make the element square first.

How Do You Read and Use the Generated Code?

The Generated CSS box always holds one complete declaration that starts with clip-path: and ends with a semicolon. You can drop it straight into a stylesheet, for example .hero-img { clip-path: ...; }, or into an inline style attribute.

Which shape should you choose?

What good and poor results look like

• Good: the shape sits fully inside the box and the important part of your image stays visible. Check that faces, logos and text are not cut off.
• Poor: content disappears at the corners. Lower the Radius, reduce the inset values, or pick a shape with more room, such as Hexagon instead of Star.
• Poor: a stretched shape. Presets use percentages, so a hexagon on a wide box becomes a wide hexagon. Give the element an equal width and height, or set an aspect ratio, when you want regular proportions.

Who Uses a Clip Path Generator?

Front-end developers and designers use it whenever a rectangle will not do and they do not want to export a masked image. The common cases are specific:

• Angled section dividers and hero banners that use a parallelogram or chevron edge.
• Hexagon or circle profile photos in team pages and comment threads.
• Arrow-shaped step indicators and ribbon-style buttons.
• Cropped product photos with an inset and rounded corners, without editing the original file.
• Students learning how percentage coordinates map onto a box, since the preview shows the effect of every change at once.

If your shape needs a backdrop, pair it with the CSS gradient generator to fill the clipped element with a smooth color blend instead of a flat color.

Best Practices, Common Mistakes and Troubleshooting

Most clip-path problems come from how the property interacts with the rest of your CSS, not from the code itself. These are the cases people hit most often.

Shadows and borders disappear

Clip-path cuts off anything drawn outside the shape, including borders and box shadows. If your shadow vanishes, put the clipped element inside a wrapper and apply a drop-shadow filter to the wrapper. For ordinary rectangular elements, the CSS box shadow generator is the right tool.

Clicks and hover still use the shape

Areas outside the clip do not respond to hover or clicks. That is usually what you want, but test buttons and links with odd shapes so the clickable area is still large enough on touch screens.

Layout space stays the same

The element still takes up its full rectangle in the page. If neighbors look too far away from a triangle or star, adjust margins or negative margins rather than expecting the box to shrink.

Animating between shapes

Browsers can smoothly transition between two clip-path values when both use the same function and the same number of points. Morphing a hexagon (6 points) into a triangle (3 points) will jump instead of glide. If you plan to animate, start from matching shapes, and build the motion with the CSS animation generator.

Different shapes on different screens

Percentages already scale with the element, but you may want a gentler angle on phones. Wrap an alternative clip-path in a breakpoint, which the CSS media query generator can write for you.

Keep the code tidy

Star and polygon values are long. When you ship them in a stylesheet, run the file through a CSS minifier to trim the size before release.

What This Generator Does Not Do

This tool covers the four basic shapes with sliders and seven polygon presets. It does not let you drag individual polygon points, import an image or SVG to trace, or draw freeform paths such as waves. Ellipse is always centered in the box, while circle lets you move the center.

You can still build a custom polygon: copy a preset from Generated CSS, paste it into your stylesheet, and edit the coordinate pairs by hand. Each pair is x then y as percentages, so moving one point from 75% 100% to 75% 80% reshapes only that corner. Rounded corners on rectangles are available through the Inset shape with Border Radius, up to 50%.

Also remember that the preview is a solid color box. Always test the final CSS on your real image or content in the browsers you support, since cropping can hide details the plain preview cannot show.

Pick a shape, adjust the controls until the preview matches your design, and copy the result with one click. Use the generator on this page to create your clip-path now, and browse more helpers in the web developer tools collection when you need the next step.