CSS Clip-Path Maker
Drag anchor points to shape your element. Copy the production-ready CSS instantly.
Click canvas to add points · Drag handles to move · Double-click handle to remove
Circle
Ellipse
Inset
Points ()
CSS Output
Tip: Add overflow: hidden to the parent if content bleeds outside the clipped area on some browsers.
About this tool
Build CSS clip-path shapes visually. Drag anchor points for polygon, adjust sliders for circle, ellipse, and inset. 8 polygon presets including star, arrow, hexagon, chevron. Live preview, instant CSS copy.
Frequently asked questions
What is CSS clip-path?
clip-path is a CSS property that hides parts of an element by defining a clipping region. Only the content inside the region is visible. It supports polygon, circle, ellipse, and inset shapes, as well as SVG paths.
What shape types are supported?
Polygon (draggable anchor points, unlimited vertices), circle (radius and center position), ellipse (independent X/Y radii and center), and inset (top/right/bottom/left offsets with optional border radius).
How do I add and remove polygon points?
Click anywhere on the canvas to add a new point. Drag any handle to reposition it. Double-click a handle or click the X in the point list to remove it. A minimum of 3 points is required.
Why do I need -webkit-clip-path?
Older versions of Safari require the -webkit- prefix. The tool outputs both the standard and prefixed versions so your shape works across all browsers.
Can I use clip-path on images?
Yes. clip-path works on any HTML element including img, div, video, and svg. Apply the copied CSS directly to the element you want to clip.