CSS Clip Path Maker

A visual CSS clip-path maker

The clip-path property cuts an element to a shape — a hexagonal avatar, a slanted hero section, a star badge, an arrow-shaped button — without editing the image itself. Writing the coordinates by hand is fiddly, so this CSS clip path maker lets you drag the points on a live preview and copies the finished code.

Start from one of seventeen presets or build a polygon point by point. Circle, ellipse and inset shapes have their own sliders, with a draggable centre for circles and ellipses. You can load your own photo to see exactly how it will be cropped, and when you want motion, save two shapes and get ready-made @keyframes that morph one into the other.

How to use the CSS Clip Path Maker

1. Choose Polygon, Circle, Ellipse or Inset. For polygons pick a Preset as a starting point.
2. Drag the numbered handles on the preview. Double-click an edge to add a point there, or select a handle and press Add point; press Delete point or the Delete key to remove one.
3. Set Snap to grid for tidy values, or type exact X and Y percentages for the selected point.
4. Press Use your image to preview the shape on your own picture.
5. Press Copy CSS. For an animation, open “Animate between two shapes”, save a start and an end, press Play to preview and copy the keyframes.

CSS Clip Path Maker features

How clip-path coordinates work

Percentages in polygon() are measured from the element’s top-left corner: 0% 0% is the top-left, 100% 100% the bottom-right. Points are joined in order and the last joins back to the first, so polygon(50% 0%, 100% 100%, 0% 100%) is a triangle pointing up. Because they are percentages, the shape stretches with the element; use px values in the copied code if you need fixed sizes.

For circle(40% at 50% 50%) the radius percentage is relative to √(width² + height²) ÷ √2 — the same value on square elements as half the side, slightly different on rectangles. inset(10% 20% 10% 20% round 12px) works like margins (top, right, bottom, left) with an optional corner radius.

Points may sit outside 0–100% — the editor allows −50% to 150% — which is useful for shapes that should bleed off one side.

Animating clip-path smoothly

Browsers interpolate clip-path only between shapes of the same function with the same number of points. A triangle cannot morph directly into a hexagon, but a triangle with duplicate points can: the generator repeats points spread around the outline until the counts match, so the extra points “grow” out of existing corners. Circles morph into circles and insets into insets the same way. Keep durations between 0.3 and 2 seconds for interface effects, and use the CSS Animation Generator for timing curves.

Practical uses and tips

• Profile pictures: a hexagon or octagon clip on a square image. Combine with corner rounding from the Border Radius Generator for softer shapes.
• Section dividers: the “Diagonal cut” preset on a full-width hero gives a slanted bottom edge without SVG.
• Hover effects: transition between two polygons with the same point count.
• Clipping hides box-shadow and outlines outside the shape; wrap the element and apply filter: drop-shadow() to the wrapper instead.
• Clipped areas do not receive clicks, which makes clip-path handy for non-rectangular buttons.
• For complex curves use an SVG path — edit it in the SVG Editor and reference it with clip-path: url(#id).