Toolis.dev

CSS Clip-path Generator

Visual editor for CSS `clip-path` polygons. Drag handles on the preview, snap to 20+ preset shapes, and copy the CSS with the `-webkit-` prefix included.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use CSS Clip-path Generator

  1. Pick a preset or start from the default hexagon.

  2. Drag any white handle to reshape the polygon.

  3. Add or remove points to refine the silhouette.

  4. Pick a background — sample image or solid color.

  5. Copy the clip-path value or the full CSS snippet.

When to use it

  • Custom button or badge shapes.

  • Hero image with a non-rectangular crop.

  • Speech bubbles and callouts.

  • Decorative section dividers.

  • Avatar masks for non-circular crops.

What it fixes

  • Hand-counting polygon coordinates.

  • Forgetting the `-webkit-` prefix for older Safari.

  • No live feedback when tweaking shape points.

About CSS Clip-path Generator

Hand-writing `polygon()` strings is fiddly — every point is a comma-separated pair of percentages, and the only feedback is the rendered shape. This tool gives you direct manipulation: drag a handle, see the shape update live.

Presets cover the classics — triangles, polygons up to 10 sides, arrows, message bubbles, frame, star — plus the non-polygon shapes `circle()`, `ellipse()`, and `inset()`. Output is a single `clip-path` value or a full CSS rule with `-webkit-` prefix for older Safari.

References: MDN — clip-path · CSS Masking Module Level 1

Frequently asked

  • What is clip-path?

    A CSS property that hides parts of an element outside a defined shape — polygon, circle, ellipse, or inset rectangle. Supported in every modern browser.

  • Why two clip-path declarations?

    Older Safari versions need the `-webkit-clip-path` prefix. Modern Safari handles the unprefixed form, but shipping both costs nothing and avoids ugly fallbacks.

  • How do I add or remove a point?

    Click `+ Point` to add a handle in the middle of the canvas, then drag it where you want. Double-click any handle on the preview to remove it (minimum 3).

  • Can I edit coordinates manually?

    Yes — every point exposes X and Y number inputs (0-100%). Useful for snapping to round values like 25%, 50%, 75%.

  • Why does my image break out of the clip?

    clip-path clips the element box, not its overflow. Make sure the clipped element has the image as a `background` (covered automatically here) or wrap the image in a container that has the clip-path.

  • Does it work with transitions?

    Yes — clip-path is animatable as long as the start and end values use the same shape function and the same number of polygon points.

Discussion

All tools