Skip to main content
Toollyz

Search tools

Search for a command to run...

CSS Clip-Path Generator

Drag any vertex to reshape the polygon, click between points to insert a new vertex, double-click to remove one. Twelve preset shapes (rectangle, triangle, rhombus, trapezoid, parallelogram, pentagon, hexagon, octagon, star, arrow, chevron, speech bubble). Inset mode for rectangular crops with corner radius. Five preview backgrounds. Copy CSS instantly. 100% offline.

What is the CSS Clip-Path Generator?

CSS Clip-Path Generator is an interactive editor for the `clip-path: polygon(...)` and `clip-path: inset(...)` CSS values. The polygon mode shows your shape as a draggable mesh — every vertex is a handle you can drag with the mouse or your finger, mid-edge buttons let you insert a new vertex anywhere along the perimeter, and a double-click removes the vertex. Twelve presets cover the shapes designers actually use: rectangle, triangle, rhombus, trapezoid, parallelogram, pentagon, hexagon, octagon, five-point star, right arrow, chevron and speech bubble. The inset mode gives you a four-sided rectangular crop with an optional corner radius — perfect for rounded rectangle masks that don't require `border-radius`. Five preview backgrounds (Sunset, Ocean, Forest, Midnight, Plain) make the clip-path edge crisp against different scenes. Output ships both the standard `clip-path` and `-webkit-clip-path` for older Safari builds.

How to use it

  1. Pick a preset to start, or hit 'Inset' mode for a rectangular crop with corner radius.
  2. Drag any vertex to reshape — coordinates update live and stay clamped to 0-100%.
  3. Click the small dot between two vertices to insert a new vertex at the midpoint.
  4. Double-click a vertex to remove it (a polygon needs at least 3 vertices).
  5. Click 'Copy CSS' for production-ready code with the WebKit prefix included.

Benefits

  • Drag-to-edit polygon — vertices move smoothly with pointer capture for accurate cursor tracking.
  • Mid-edge add buttons let you densify any part of the shape without losing the others.
  • Twelve presets — rectangle, triangle, rhombus, trapezoid, parallelogram, pentagon, hexagon, octagon, star, arrow, chevron, speech bubble.
  • Inset mode for rectangular crops with optional corner radius.
  • Five preview backgrounds — pick the one that shows the clip-path edge most clearly.
  • Output ships both `clip-path` and `-webkit-clip-path` for Safari coverage.
  • Pointer events handle mouse, touch and pen identically.
  • Settings persist in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

What's the difference between polygon() and inset()?

polygon() takes a list of x/y vertices and draws straight lines between them — use it for stars, chevrons, speech bubbles, anything non-rectangular. inset() takes top/right/bottom/left insets and an optional corner radius — use it when you just need to round or crop the edges of a rectangle.

Can I create curved clip-paths?

polygon() and inset() are both straight-edge primitives. For curves you'd need to drop into the SVG `<clipPath>` element via `clip-path: url(#id)` — out of scope for this tool. The closest you can get here is a high-vertex polygon that approximates a curve.

Why double-click to remove?

Single-clicking a vertex starts a drag. A second click while held would be ambiguous. Double-click is the safest 'I really want this gone' gesture and matches behaviour in most vector editors.

Does clip-path work everywhere?

Yes — every evergreen browser supports `clip-path: polygon()`. Older Safari (< 14) needed `-webkit-clip-path`; we emit both so you don't have to think about it.

Can content overflow the clip?

Anything outside the clip path is invisible — including pointer events. If you need clicks on the clipped area but a different visible shape, layer two elements.

Why are coordinates in percent?

Percent makes the clip-path responsive — the same shape works at any element size. Pixel coordinates would lock the shape to a specific dimension.

Can I copy the SVG path?

Not yet — the Copy CSS button emits the CSS `clip-path: polygon(…)` value. You can convert the percent points to an SVG `<path>` `M…L…Z` by hand if needed.

Why does the inset have a corner radius option?

The CSS spec lets you optionally append `round <radius>` to inset() — equivalent to `border-radius` on the clip. Useful when you want a rounded crop that doesn't conflict with an existing `border-radius`.

Does it work on touch devices?

Yes — drag handles use Pointer Events which unify mouse, touch and pen input.

Are my shapes saved between visits?

Yes — the active mode, polygon points and inset values persist in localStorage under `toollyz:clip-path`.

Is anything uploaded?

No. Toollyz is statically exported — preview and CSS generation run entirely in your browser.

Related tools

See all image tools