ZeroTool Workbench
CSS Clip-Path Generator
Generate CSS clip-path shapes visually. Drag handles to create polygons, circles, ellipses, and inset shapes. Live preview with instant CSS output. Free online tool.
How to Use
- Select a shape type — Polygon, Circle, Ellipse, or Inset — using the tabs.
- For Polygon: drag the white handles on the preview to reposition vertices, or type exact X/Y values in the vertex list. Use the preset buttons (Hexagon, Star, Arrow, Diamond, Triangle) as starting points. Add or remove vertices as needed.
- For Circle: adjust the radius and center position with the sliders.
- For Ellipse: set horizontal radius, vertical radius, and center position independently.
- For Inset: set offsets from each edge and an optional corner radius.
- Toggle between Color and Image background to test the clipped element against different backdrops.
- Copy the generated CSS with the Copy button.
Understanding the Generated CSS
The output sets clip-path on an .element class. Apply this property directly
to any element — an img, a div, or a pseudo-element. All coordinates use
percentages relative to the element’s own width and height, so the shape scales correctly when the
element is resized.
Common Use Cases
CSS clip-path is used to create non-rectangular image crops, diagonal section dividers, decorative hero shapes, animated shape reveals, icon masks, and scroll-triggered morphing effects. The polygon mode is especially flexible — any convex or concave polygon with up to twelve vertices can be expressed as a clip-path without any SVG or canvas.
FAQ
What is CSS clip-path?
The CSS clip-path property clips an element to a specified shape, hiding everything outside the boundary. Supported shapes include polygon(), circle(), ellipse(), and inset(). It is hardware-accelerated and works on any HTML element including images, divs, and pseudo-elements.
How do I drag the polygon vertices?
Switch to the Polygon tab, then drag the white circle handles on the preview square to reposition vertices. You can also type exact percentages directly in the vertex list on the right. Add vertices with the + Add Vertex button and remove them with the × button.
What do the percentages in polygon() mean?
Each vertex is expressed as two percentages: X% from the left edge and Y% from the top edge of the element's bounding box. A point at 50% 0% is the top-center, and 100% 100% is the bottom-right corner. Values outside 0–100% are valid and clip beyond the element boundary.
What is the inset() function?
inset() defines a rectangular clipping region by specifying offsets from each edge (top, right, bottom, left). The optional round keyword adds border-radius to the clipped rectangle's corners. It is useful for soft-edge crop effects or adding a visually padded clipping region.
Can I animate clip-path with CSS transitions?
Yes, as long as both the start and end values use the same shape function with the same number of points. For example, you can smoothly animate between two polygon() values of equal vertex count, or between two circle() values, using transition: clip-path 0.3s ease.