Skip to main content
7BBusyBoss

CSS Clip-Path Generator — Shape Clipper

Generate CSS clip-path shapes: triangle, hexagon, star, circle, arrow and more with a live preview. Copy-ready clip-path CSS, free.

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
About this tool

Clip elements into shapes

The CSS clip-path property crops an element to a shape — triangle, hexagon, star, circle and more — without editing the image. Pick a shape and copy the value.

Using it

Apply clip-path to any element (an image, a div, a background). The visible area becomes the shape; the rest is clipped away. It's responsive (percentage-based) and far lighter than masking with images.

How to use the CSS Clip-Path Generator

Takes about a minute. No signup, no download, your data stays in your browser.

  1. 1
    Open the tool. Scroll up to the CSS Clip-Path Generator above — it loads instantly in your browser, no install needed.
  2. 2
    Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
  3. 3
    Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.

Frequently asked questions

Common questions about the CSS Clip-Path Generator.

What does clip-path do in CSS?

It crops an element to a shape (polygon, circle, ellipse), hiding everything outside it.

How do I clip an image into a shape?

Apply clip-path to the image or its container — pick a shape here and paste the value.

Is clip-path responsive?

Yes — percentage-based polygons scale with the element.

Does clip-path work on backgrounds?

It clips the whole element including its background; to clip only a background image, use mask instead.

Community rating

Discussion (0)

No comments yet. Start the discussion.

Keep exploring

Related tools across 7BusyBoss — all free, all instant.