CSS Clip-Path Generator

What is clip-path?

clip-path is a CSS property that hides everything outside a shape you define, leaving only the part inside visible — no image editor, mask file, or extra markup required. It's how you get circular avatars, hexagonal badges, angled section dividers, arrow-shaped buttons and speech-bubble callouts using nothing but CSS on an ordinary <div> or <img>.

This tool builds a ready-to-paste clip-path declaration from a shape picker, with a live preview of exactly what the CSS produces.

How to use this tool

1. Pick a Shape — a basic shape (Circle, Ellipse, Inset) or one of the polygon presets (Triangle, Rhombus, Pentagon, Hexagon, Octagon, Star, Message, Arrow, Cross, Chevron, Parallelogram, Trapezoid).
2. Fine-tune it:
   • Circle — Radius and Center X/Y, all as percentages of the element's own box.
   • Ellipse — independent Radius X/Y plus Center X/Y.
   • Inset — Top/Right/Bottom/Left insets (how far each edge pulls in from the box) plus an optional Corner Radius for rounded rectangles.
   • Polygon presets are fixed shapes — pick Custom polygon instead to hand-edit the vertex list directly (see below).
3. For Custom polygon, edit the Polygon Points field: a comma-separated list of x% y% pairs, one per vertex, going around the shape in order (at least 3). Every polygon preset above is really just one of these lists under the hood — copy a preset's output polygon(...) coordinates in here as a starting point if you want to nudge one.
4. Copy the CSS and apply it to any element — clip-path works on images, divs, buttons, anything with a box. The Preview shows exactly what it looks like; the HTML Snippet below it is the same markup as a self-contained, inline-styled <div> you can paste anywhere a stylesheet isn't convenient.

Why both clip-path and -webkit-clip-path?

The unprefixed clip-path property is supported in all current browsers, but the -webkit- prefixed form is included alongside it for older WebKit-based browsers that only recognized the prefixed version — a cheap compatibility line that costs nothing in modern browsers.

FAQ

Can I animate clip-path? Yes — clip-path is animatable, so transitioning between two same-shape-type values (e.g. two polygon()s with the same number of points, or two circle() radii) animates smoothly with a plain CSS transition. This tool generates a single static value; add your own transition: clip-path 0.3s ease; alongside it.

Do all polygon vertices need to use %? This tool always emits percentages, which scale with the element's own size (the most portable choice). You can hand-edit the copied CSS to use px if you need a fixed-size shape instead.

Why do the polygon percentages look "wrong" for the Star preset? A 10-point star's points alternate between an outer radius and a shorter inner radius from the shape's center — the percentages aren't meant to look uniform, they trace the star's spikes and inner notches.

Does clip-path affect click/hover targets? No — clicking outside the visible clipped area still hits the element's original (unclipped) box in most browsers unless you also constrain pointer events yourself (e.g. pointer-events: none plus a clipped overlay, or reworking the layout so the box IS the shape).

Privacy

Everything happens in your browser. Your chosen shape and settings are never sent to a server — the CSS and preview are generated and updated locally as you adjust the controls.