Skip to main content
DevStackKit
All tools

CSS Clip Path Generator

Cut an element into a polygon, circle, ellipse or inset shape. Drag points on a live preview, use presets, and copy the clip-path CSS.

#1
#2
#3

CSS

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Tailwind

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to CSS Triangle Generator or Border Radius Generator.

Free CSS clip-path Generator

Pick a shape or drag the points on the preview, and copy the clip-path CSS. Try it on your own picture. It gives developers a quick browser-based way to solve a focused css clip path generator task before moving the result into a project.

How to use it

Choose Polygon, Circle, Ellipse or Inset. For a polygon, start from a preset, drag the dots on the preview or type the numbers, and add or remove points. Copy the CSS when it looks right.

Common mistakes

  • A polygon with fewer than 3 points has no area: add a point.
  • Expecting the clipped-away area to be empty space: the element keeps its full box for layout.

Frequently asked questions

What is clip-path?
clip-path hides everything outside a shape. The element keeps its box for layout, but only the part inside the shape is drawn and clickable.
Should I use % or px?
Use % so the shape scales with the element. Use px only when the element has a fixed size.
Why is there a -webkit- line?
Older Safari versions need the prefixed property. Both lines are included.
Is my image uploaded?
No. A picture you choose is only shown in your browser and never leaves it.
How do I use this css clip path generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →