BluebirdBluebird
Home/CSS clip-path Generator

CSS clip-path Generator

Design clip-path shapes — triangle, hexagon, star, arrow and more — with a live preview and one-click CSS.

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Pick input
  2. Tweak
  3. Copy / export
How this works
  1. 1
    Drag the shape points

    Move the corner handles around. The shape is the visible area — everything outside gets clipped.

  2. 2
    See it clip live

    A sample image shows what the shape hides and reveals in real time.

  3. 3
    Copy the clip-path CSS

    Paste the generated polygon() into your stylesheet.

Watch: drag a handle, CSS updates live
copy
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Fine-tune points
Point 1
Point 2
Point 3
How this works
  • Pick a starting shape — triangle, hexagon, star, arrow and more.
  • Drag the X and Y sliders to fine-tune any corner.
  • Copy the ready-to-paste clip-path CSS into your project.

Rate CSS clip-path Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate