LocalToolsOffline browser tools collection

Category: Developer tools

CSS Clip-Path Generator

System ideaMissing a tool?

Pick a shape and copy its clip-path value

Choose a shape, from a circle or ellipse to a hexagon, arrow or speech bubble, adjust how far it insets from the edges, and copy the resulting clip-path value with a live preview.

Output
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

Writing a clip-path polygon by hand means plotting each point's percentage position and imagining how they connect, which is slow to iterate on for anything beyond a simple triangle. This tool ships a set of common shapes as ready-made point lists, plus a single inset control that scales every point toward the center the same way for any shape, so you can preview and copy a usable clip-path without doing the geometry yourself.

How to use it

  1. Pick a shape.
  2. Adjust the inset to grow or shrink it within its box.
  3. Copy the clip-path declaration.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Why do circle and ellipse behave differently from the other shapes?
circle() and ellipse() take a radius, so the inset there shrinks the radius directly, while the polygon shapes scale every point toward the center by the same percentage.
Does clip-path affect layout or just what's visible?
Only what's visible. The element keeps its original box for layout purposes; clip-path only hides the parts outside the shape, the same way overflow: hidden hides content outside a box.
Is anything sent to a server?
No. The shape's points are calculated in the page from your shape and inset choice, which is why the preview updates instantly.

Back to all tools