My Tool Studio
CSS

CSS Clip Path Generator

This clip path generator cuts an element into a custom shape: drag points on the preview, start from one of 21 polygon presets, or switch to circle, ellipse and inset with sliders. It can also turn artwork into a shape. Import an SVG and its path becomes a responsive percentage polygon, or upload a PNG with a transparent background and the outline is traced into editable points. Snap to grid, number fields and arrow-key nudging help when points must line up exactly. Hide or show the area outside the clip and change the preview aspect ratio. When the shape looks right, copy the CSS with the -webkit- prefix, the bare value, a Tailwind class or a hover reveal snippet, download the clipped result as a PNG, or share a link.

Always freeNo sign upRuns in your browser
|

Drag points or focus one and use the arrow keys · click a + dot to add a point · Alt-click a point to remove it

Presets

Edit points by number (6)
1
2
3
4
5
6
Show the area outside the clip
Aspect
.element {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

How to use

01

Pick a starting shape

Choose one of the 21 presets, click Circle, Ellipse or Inset for slider shapes, or use Import SVG or Trace PNG to start from your own artwork. Preview image puts your photo behind the shape.

02

Adjust the points

Drag the blue handles, click a + dot to add a point, Alt-click to remove one, or focus a handle and use the arrow keys. Set Snap to grid or type values under Edit points by number.

03

Copy the CSS or download a PNG

Pick CSS, Value only, Tailwind or Hover reveal and copy it. Download PNG saves the clipped image at the chosen aspect ratio, and Copy share link keeps the shape in a URL.

Why CSS Clip Path Generator

Tracing a PNG into a clip-path polygon

Trace PNG turns a raster image into a shape you can use in CSS. It scales the image down to at most 220 pixels wide, marks every pixel as solid or empty, and walks around the edge of the largest solid area to get its outline. That outline can have hundreds of points, so the tool simplifies it with the Ramer-Douglas-Peucker method, which drops points that barely change the shape.

The result is a polygon() in percentages that scales with the element. The Trace detail slider controls how aggressive the simplification is: move it left for more points and a closer fit, right for fewer points and shorter CSS.

Tips for a clean trace:

  • Use a PNG with a transparent background. Without transparency, only near-white pixels are treated as background.
  • Only the largest shape is traced. Holes and separate parts, like the dot on an i, are ignored.
  • Simple, bold silhouettes give short polygons. Detailed illustrations need many points and may look jagged.

clip-path shape functions at a glance

All five functions are supported in current browsers. The first four use values that can be percentages, so they adapt to the element size. Percentages in circle() are measured against a blend of the width and height, so a circle stays round on a rectangle.

Any of these values can also be transitioned. Two polygon() values animate smoothly only when they have the same number of points, so duplicate a point if one shape needs fewer corners than the other.

FunctionExampleUse it for
polygon()polygon(50% 0%, 100% 100%, 0% 100%)Any straight-edged shape
circle()circle(40% at 50% 50%)Round avatars and spotlights
ellipse()ellipse(45% 30% at 50% 50%)Oval crops
inset()inset(10% 10% 10% 10% round 16px)Rectangles with margins or rounded corners
path()path('M0 0 L100 0 L50 80 Z')Exact SVG curves at a fixed pixel size

Common questions

How many presets does the clip path generator include?
Twenty-one: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, bevel, star, arrow right, arrow left, chevron, message bubble, cross, close mark, tag, ribbon, point down, slant top, diagonal cut and frame. Each loads as an editable polygon, so you can drag its points afterwards.
Can I trace a clip-path shape from a PNG logo?
Yes. Trace PNG reads the image's transparency, finds the outline of the largest solid area and simplifies it into polygon points. PNGs with a transparent background work well; for flat images it treats near-white as background. A detail slider then trades point count against accuracy.
What happens when I import an SVG into the clip path tool?
It samples 120 points along the SVG path, converts them to percentages and simplifies the result into a polygon you can edit. The original path is kept too, so a path() button appears if you want the exact curve. Only path, polygon and polyline elements are read.
How do I line up clip-path points exactly?
Turn on Snap to grid with a 5, 10, 12.5 or 25 percent step and dragged points jump to the grid. You can also focus a handle and nudge it with the arrow keys, or open Edit points by number and type the X and Y percentages.
Can I download the clipped image as a PNG file?
Yes. Download PNG draws your preview image, or the demo gradient, through the current shape onto a canvas 1200 pixels wide and saves it with a transparent background. The height follows the Aspect setting (4:3, 1:1, 16:9 or 3:4), the same crop as the preview. Everything happens in your browser.
Why does the copied clip-path CSS include a -webkit- prefix?
Older Safari versions only understood -webkit-clip-path, so the CSS tab writes both lines. Current browsers read the standard property and ignore the extra line. If you only support recent browsers, copy the Value only tab or delete the prefixed line.
Is polygon() clip-path output responsive?
Yes, because the coordinates are percentages. A point at 50% 0% stays at the top center at any element size. The path() option is different: its coordinates are pixels, so it only fits an element of the original SVG size.
Do clicks pass through the cut-away parts of a clip-path shape?
Yes. The clickable area follows the clipped shape, so clicks outside it reach whatever sits behind. That is useful for arrow-shaped buttons and overlapping angled cards.
Can clip-path make curved shapes, not just straight edges?
circle() and ellipse() are curved, and inset() can have rounded corners with the round keyword. polygon() only draws straight lines, so curves are approximated with many points. For a true curve, import an SVG and use the path() output, keeping in mind it is pixel based.

More CSS tools

View all

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS

CSS Animation Generator

Build @keyframes animations from presets

CSS