CSS Clip-Path Generator
Edit CSS clip-path shapes visually with presets, draggable polygon points and sliders. Copy the clip-path CSS.
🔒 Runs entirely in your browser — nothing is uploadedDesign CSS clip-path shapes visually
The clip-path property lets you cut an element into almost any shape using only CSS. Hexagonal avatars, slanted section edges, arrow-shaped buttons and speech bubbles can all be made without images or extra markup. Writing polygon coordinates by hand is tedious, though. This generator gives you a live preview with draggable handles, so you can shape the element and copy the finished declaration.
Polygons, circles, ellipses and insets
The tool supports the main basic shape functions. polygon() takes a list of points
written as x and y percentages, which is ideal for triangles, trapezoids, stars and arrows.
circle() and ellipse() take a radius and a center position, and
inset() cuts in from each edge of the box with an optional rounded corner radius.
Pick a preset as a starting point and refine it. For polygons, drag any handle to move a vertex,
or focus a handle and use the arrow keys for precise one-percent steps, holding Shift for larger
jumps.
Tips for using clip-path
Because all values are percentages, the shape scales with the element, which makes it well suited
to responsive layouts. Remember that clip-path only affects painting: borders and box shadows
outside the shape are clipped away too, so use a wrapper element with
filter: drop-shadow() if you need a shadow that follows the shape. You can also
animate between two polygons that have the same number of points using CSS transitions for smooth
morphing effects. The generated code is a single line you can paste into any stylesheet, and all
editing happens locally in your browser.
How to use
- Choose a presetStart from a shape such as a triangle, hexagon, star, arrow, circle or inset rectangle.
- Edit the shapeDrag polygon handles, or use the sliders for circle, ellipse and inset shapes.
- Add or remove pointsSelect a point and add another after it or remove it to refine the polygon.
- Copy the CSSCopy the clip-path declaration and apply it to any element.