CSS

CSS clip-path generator

Details

How to use CSS clip-path generator

What the tool does, how to run it, and what to expect from the result.

How to generate a CSS clip-path

clip-path cuts an element down to a shape without needing an image mask, an SVG wrapper, or a container with overflow hidden. Because the coordinates can be percentages of the element's own box, the shape scales with the element, which is why it beats any raster approach for responsive layouts.

Pick a preset or type your own polygon points, watch it clip live, and copy the two lines of CSS.

  • Pick a shape: triangle, circle, ellipse, hexagon, pentagon, message bubble, arrow, close cross, or frame.
  • Or choose Custom polygon and type your own points as comma-separated x y pairs.
  • Toggle preview on image to see the shape against a busier fill.
  • Copy the CSS, which includes both -webkit-clip-path and clip-path, and paste it onto your element.
Tips

Getting a better result out of CSS clip-path generator

Specific settings and thresholds, not general advice.

  • clip-path clips, it does not reflow. The element still occupies its full box in the layout, so text next to a clipped triangle still wraps around the rectangle. Use shape-outside if you want surrounding content to follow the shape.
  • Percentages in a polygon are relative to the element's own border box, not to the viewport, which is what makes a polygon-based shape responsive for free: the same points work at 200px and at 2000px.
  • The generator emits both -webkit-clip-path and the unprefixed clip-path. Every current browser reads the unprefixed one; the prefix costs one line and buys you older Safari and older Android WebViews.
  • Anything outside the clip is not only invisible: it stops receiving pointer events. Clip a button into a triangle and only the triangle is clickable, which is usually what you want and is occasionally a bug people spend an hour on.
  • Custom polygon points are typed as x y pairs separated by commas, in the order the outline is drawn: 50% 0%, 0% 100%, 100% 100%. The path closes automatically, so do not repeat the first point at the end.
Limits

What CSS clip-path generator does not do

The honest boundary, so you do not lose time finding it yourself.

  • Nine preset shapes plus a custom polygon. There is no draggable handle editor.
  • Polygon, circle, and ellipse only. No inset(), no path() with SVG bezier curves.
  • No animation or transition between two shapes.
  • The preview shows your shape over a sample image, not over an image you upload.
At a glance

Who CSS clip-path generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Front-end developers and designers building CSS shapes.

Ideal for

Using the css clip-path generator without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Does clip-path change the layout?

No. The element keeps its full box for layout purposes, so neighbouring content flows around the original rectangle rather than the visible shape. If you want text to hug the diagonal edge of a clipped triangle, you need shape-outside with the same polygon, which is a separate property that only affects floats.

Can I use my own polygon points?

Yes. Choose Custom polygon and type the points as space-separated x y pairs separated by commas, in drawing order, for example 50% 0%, 0% 100%, 100% 100%. Percentages are relative to the element's own box, which is what makes the shape scale with it. The shape closes automatically.

Do I still need the -webkit- prefix?

For current browsers, no. The unprefixed clip-path is supported everywhere. The generator emits the prefixed version first anyway because it is one extra line and it keeps older Safari and Android WebView working, which still matters if you have a long-tail mobile audience.

Why is only part of my clipped button clickable?

Because clip-path also clips hit-testing. The area outside the shape no longer receives pointer events, so a button clipped to a triangle only responds inside the triangle. This is correct behaviour and it is what you want most of the time, but it will surprise you the first time you meet it.

Can I animate between two shapes?

CSS can transition a clip-path polygon to another polygon only if both have the same number of points, listed in the same order. That is a real constraint: a triangle cannot smoothly become a hexagon. The usual trick is to pad the simpler shape with duplicate points so both polygons have the same count.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon