CSS Clip-Path Generator

What this tool does

The CSS Clip-Path Generator lets you shape any element visually instead of hand-writing polygon() coordinates. Pick a mode — polygon, circle, ellipse, or inset — drag the handles right on the preview, and the CSS updates in real time. Load one of 13 built-in shape presets (triangle, hexagon, star, arrow, message bubble, cross, and more) as a starting point, or build a fully custom polygon point by point.

You can preview the clip-path over a plain gradient or upload your own image, so you know exactly how a photo or hero graphic will look once the shape is applied. When you're happy with it, copy the plain CSS (with the -webkit- prefix included for older Safari) or a ready-made Tailwind arbitrary-value class.

How to use the CSS clip-path maker

• Choose a shape type: Polygon for angular custom shapes, Circle or Ellipse for round crops, or Inset for a rounded-rectangle cutout.
• In Polygon mode, click a preset to start (star, hexagon, arrow, parallelogram, and others), then drag any white point to fine-tune it.
• Use Add Point to insert a new vertex on the longest edge, or double-click a point to delete it.
• Switch to Circle, Ellipse, or Inset mode and use the sliders for radius, position, or edge insets and corner rounding.
• Upload an image to preview the exact crop against your real photo instead of a placeholder color.
• Copy the generated CSS or the Tailwind class and paste it straight into your stylesheet or markup.

Common use cases

• Angled section dividers — use a polygon or trapezoid clip-path to give a hero section or card a diagonal edge instead of a straight line.
• Circular or hexagonal avatars — clip a profile photo into a circle, hexagon, or custom badge shape without touching the source image file.
• Image reveal animations — animate between two clip-path values (e.g. inset(100%) to inset(0%)) for a wipe-in effect on scroll.
• Custom buttons and badges — chevrons, ribbons, and arrow shapes built purely in CSS, no extra image assets or SVG masks required.

Frequently asked questions

What's the difference between clip-path and border-radius?

border-radius only rounds the corners of a box. clip-path can cut a shape of almost any complexity — polygons, circles, ellipses, or an inset rectangle with rounded corners — so it's the right tool for angled cuts, stars, arrows, or any non-rectangular crop.

Does clip-path work on background images too?

Yes. Apply clip-path directly to any element with a background-image, a real <img>, or a solid-color <div> — the shape clips whatever is inside the element's box.

Is a vendor prefix still needed for clip-path?

Modern Chrome, Firefox, and Edge support unprefixed clip-path. Older Safari versions still need -webkit-clip-path, which is why this generator outputs both automatically.

Can I animate a clip-path shape with CSS transitions?

Yes, as long as the polygon on both ends has the same number of points in the same order — browsers interpolate each point's position, which is what makes wipe and reveal effects possible.

Why doesn't clip-path affect my element's layout or click area?

clip-path only changes what's painted, not the box model — the element still takes up its original space and the clipped-away parts are no longer clickable, but padding, margin, and layout are unaffected.