CSS Clip Path Generator - Create Shapes Visually (Free)

Draw any CSS clip-path shape and copy the code instantly

Drag the handles in the editor above, pick a preset shape, and the ready-to-paste clip-path CSS drops into your clipboard. No math, no guessing coordinates.

The clip path generator above turns what used to be a painful coordinate-calculation exercise into a two-second visual task. Works for polygon cutouts, circles, ellipses, and more.

How to use the clip path generator

1. Pick a starting shape — choose a preset like hexagon, triangle, arrow, or star from the shape menu, or start with a blank rectangle.
2. Drag the handles — each handle is a point on the polygon. Move them freely to reshape the mask.
3. Add or remove points — click the edge to add a new anchor; click an existing point and delete it to simplify the shape.
4. Copy the CSS — hit the Copy button. The generated rule (e.g. clip-path: polygon(50% 0%, 0% 100%, 100% 100%);) lands in your clipboard, ready to paste.
5. Paste into your stylesheet — drop it on any element and the browser clips it to that exact shape instantly.

Worked example: creating a pentagon card

Say you want a card component clipped to a five-sided shape. Start with the pentagon preset. The tool outputs something like:

/* Pentagon clip-path - generated output */
.card {
  clip-path: polygon(
    50% 0%,
    100% 38%,
    82% 100%,
    18% 100%,
    0% 38%
  );
}

Paste that into your .card rule and you're done. The browser handles all the clipping - no SVG file, no image mask, just one line of CSS.

Snippet-bait: three shapes at a glance

The three most-reached-for shapes and their clip-path values:

polygon() is the most flexible — you list as many X/Y coordinate pairs as you need. circle() takes a radius and a center point. ellipse() takes two radii (horizontal and vertical) plus a center. Pick a ready-made shape like a hexagon or star from the generator above and copy the CSS instantly.

How to apply clip-path in code (no generator needed for simple shapes)

Once you have the value, applying it is identical in every stack.

Plain CSS

.hero-image {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

JavaScript (setting it dynamically at runtime)

const el = document.querySelector('.hero-image');
el.style.clipPath = 'polygon(0 0, 100% 0, 100% 85%, 0 100%)';

React / JSX (inline style)

function HeroBanner() {
  return (
    <div
      style={{ clipPath: 'polygon(0 0, 100% 0, 100% 85%, 0 100%)' }}
      className='hero'
    />
  );
}

Note that in JavaScript and JSX the property name is camelCase clipPath, not the hyphenated CSS form.

How it works under the hood

The browser's CSS clip-path property tells it to render only the pixels that fall inside the shape you define. Every pixel outside the shape is simply not painted — which means the element's background, borders, and shadows are all clipped too.

The generator tracks each handle's position as a percentage of the element's width and height, then formats those numbers into a valid polygon() (or circle()/ellipse()) string. Percentage-based coordinates mean your shape scales perfectly with the element at any size.

The official spec for these shape functions lives in the CSS Shapes Module Level 1 (W3C). Full browser support details and live demos are on MDN: clip-path.

When to use clip-path — and when not to

Great for:

• Diagonal section dividers on landing pages
• Hexagon/circle image thumbnails in profile grids
• Animated shape transitions with CSS transition or JS libraries (polygon point counts must match for smooth animation)
• Decorative card cutouts that need to stay crisp at all resolutions

Skip clip-path when:

• You need content (text, buttons) to wrap around the clipped shape — use CSS shape-outside for float wrapping instead.
• The clipped area must be interactive (clicks still register on the invisible part of the element, which surprises users).
• You're masking complex paths with transparency — an SVG <clipPath> or CSS mask-image gives you more control.
• You need IE 11 support — clip-path on HTML elements has no IE support at all.

Your data stays private

Everything happens in your browser. No coordinates, images, or CSS values are uploaded to any server. Close the tab and nothing is saved anywhere.

Clip your shapes visually, copy the code, and ship — the generator above is ready whenever you need it.