Cut any element into a custom shape — drag the points, pick a preset, or dial in a circle, ellipse, or inset. Copy the CSS when you're done.
The CSS clip-path property lets you cut an element down to any shape you like. Start from a
polygon preset like a triangle, star, or speech bubble and drag the points to fine-tune
it, or switch to circle, ellipse, or inset for simpler geometric crops. Toggle
Hide guides to preview the clean result without the draggable handles.
The preview uses a plain gradient rather than a stock photo, so you can judge the shape itself — swap in your own background image or color once you paste the CSS into your project.
Yes. Click "+ Add Point" to add one near the shape's center, then drag it into place. Double-click any point to remove it (a polygon needs at least 3).
Yes, all modern evergreen browsers support
clip-path with polygon, circle, ellipse, and inset shapes unprefixed.
In most modern browsers, yes — clicks and hovers outside the visible clipped shape are ignored, which is useful for custom-shaped buttons and cards.
Tell us what to improve or which tool to add next.
