CSS Clip-Path Generator

Draw a Shape, Copy the clip-path

The CSS clip-path property crops an element to any outline you like — a hexagon, a circle, an arrow, a chat bubble — but writing the coordinate list by hand is tedious and easy to get wrong. This editor lets you drag the points and handles right on a live preview and reads back the exact clip-path value, ready to paste into your stylesheet.

Everything runs in your browser. Pick a shape type — polygon, circle, ellipse, or inset — or start from a preset, then drag the vertices while the CSS updates as you go. The preview box is square on purpose: every percentage in the output lines up one-to-one with what you see, so the shape you drag is the shape you ship. You can even drop in your own image to check the crop against real content — the image never leaves your device.

Copy the value on its own, a full clip-path declaration (with an optional -webkit- prefix for older Safari and iOS), or a Tailwind arbitrary-value class.

What you can build

• Angled section dividers: Slice the top or bottom off a hero band with an inset or polygon so two sections meet on a clean diagonal.
• Decorative image crops: Frame avatars as circles, product shots as hexagons, or feature images as arrows and chevrons.
• Chat and callout bubbles: Start from the Message preset to get a speech-bubble tail without adding an extra element.
• Badges and stickers: Stars, plus signs, and bevelled corners for labels, tags, and price flags.
• Reveal and hover animations: Grab a clean value to animate clip-path between two shapes on scroll or hover.
• Custom buttons and cards: Notch a corner or point one edge to give a component a distinctive silhouette.

One honest caveat: a clip-path shape is a single outline, so it can't cut holes — a picture-frame or donut needs an SVG mask instead — and very old browsers ignore clip-path entirely, so keep the layout usable when it's missing.

Privacy: This tool runs entirely in your browser. Your shapes and any image you preview against are never uploaded — nothing is sent to a server, and there is no sign-up.