CSS Generators
CSS Gradient GeneratorCSS Box-Shadow GeneratorCSS Grid GeneratorCSS Clip-Path Generator

CSS Clip-Path Generator

Drag points to shape a clip-path polygon, preview it on your own image, and copy the CSS.

Runs in your browserNo sign-up required
Start from a shape
Edit here or drag the points on the preview — both stay in sync.
Smooth when both shapes are polygons with the same number of points.
Preview on your own image (optional)

Drag the numbered points. Tap a small + on an edge to add a point. Arrow keys nudge a selected point (Shift for 5%).

Export

See the Shape on Your Actual Image

A clip-path shape can look completely different once applied to a real photo versus a flat color swatch — proportions, focal points, and framing all interact with the shape's edges. This tool lets you preview any of 12 shape presets directly on your own uploaded image (kept entirely local — nothing is uploaded), plus an optional hover-morph animation into a second shape.

How to Use This Tool

  1. 1Pick a starting shape12 ready-made shapes, from a simple triangle to a star and a speech bubble.
  2. 2Drag the pointsMove any point on the preview, tap a + on an edge to add one, or remove points — the CSS updates as you go. Arrow keys nudge a point precisely.
  3. 3Preview it on your own imageOptionally upload a photo to see exactly how the shape will crop it — nothing is uploaded anywhere, it stays in your browser.
  4. 4Add a hover-morph target (optional)Pick a second shape to smoothly transition into on hover.
  5. 5Export in the format you needPlain CSS, a Tailwind arbitrary-value class, or an SCSS variable.

Good to Know About clip-path

  1. 1clip-path crops without affecting layoutUnlike actually cutting an image file, clip-path is purely visual — the element keeps its original size and position in the layout; only the visible, clickable area changes shape.
  2. 2Smooth hover-morph needs matching shape functions and point countsA polygon() shape transitions smoothly into another polygon() with the same number of points, since the browser interpolates each point's position — mixing shape types (like a polygon into a circle) or changing the point count usually snaps instead of animating smoothly.
  3. 3It works on any element, not just imagesButtons, divs, and cards can all use clip-path the same way — the shape presets here aren't image-specific, they're just easiest to see clearly when applied to a photo.

Frequently Asked Questions

Is my uploaded image sent anywhere?

No — the image is only used to render the live preview locally in your browser using a local object URL. It's never uploaded or transmitted anywhere.

Why doesn't my hover-morph animate smoothly?

Smooth clip-path transitions require both shapes to use the same function (both polygon(), for example) with the same number of coordinate points — transitioning between a polygon and a circle, or between two polygons with a different number of points, will usually jump instead of animating.

Can I write a custom clip-path value instead of using a preset?

Yes — the value field is directly editable, so you can start from a preset and adjust the coordinates, or paste in a clip-path value from anywhere else entirely.

Does clip-path work in all browsers?

Yes, clip-path with polygon(), circle(), and inset() has solid support across all modern browsers. Older browser support (particularly very old Safari versions) sometimes needed a -webkit- prefix, which is rarely necessary today.

Does cropping with clip-path reduce an image's file size?

No — clip-path only changes what's visually displayed; the full original image is still loaded. If reducing file size is the goal, use an actual image cropping tool instead.

Is this clip-path generator free to use?

Yes, completely free, with no sign-up and no limit on how many shapes you create.