ToolBoxy
Sign up free
🎨

CSS Clip Path Generator

css · clip-path · shape · polygon · generator

Background
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

polygon() — custom polygon with x y point pairs

circle(r at x y) — circular clip

ellipse(rx ry at x y) — elliptical clip

inset(top right bottom left round radius) — rectangular with optional rounding

How to use

  1. 1

    Pick a shape preset or type your own.

  2. 2

    Set the background color.

  3. 3

    Copy the generated clip-path CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

Create CSS clip-path shapes visually and copy the code. You can use it for free with no sign-up or installation — just open the page and start right away.