CSS Clip-Path Generator

This tool generates a CSS clip-path value from a shape preset — circle, ellipse, triangle, pentagon, hexagon, star, or a rounded rectangle — and shows the clipped shape live on a preview box before you copy the CSS. There's no need to hand-calculate polygon() coordinates for common shapes.

What Is This Tool?

clip-path is the CSS property that hides everything outside a defined region of an element, leaving only the shape inside visible — the rest of the element's box is still there in the layout, it's simply not painted. It accepts basic shape functions like circle(), ellipse(), inset(), and polygon(), the last of which takes an arbitrary list of x/y coordinate pairs to define any straight-edged shape.

polygon() coordinates are the hardest part to write by hand — a pentagon, hexagon or star each needs several precisely placed points, and getting one wrong distorts the whole shape. This tool computes those coordinates for you from a shape preset, updates the live preview instantly, and gives you the exact clip-path CSS to copy.

Source: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — the specifications defining clip-path and its basic shape functions.

Why Use It?

Live preview clips an actual preview box to the chosen shape, so you see the real result instead of imagining it from coordinates.
Seven shape presets — circle, ellipse, triangle, pentagon, hexagon, star, and rounded rectangle — cover the vast majority of clip-path use cases without hand-writing polygon points.
Circle, ellipse and rounded-rect presets include a size/roundness slider so you can fine-tune the shape without editing coordinates.
Outputs standard clip-path CSS ready to paste onto any element.
Runs entirely in your browser — nothing you configure is uploaded anywhere. Free, no signup, works on mobile.

How to Use

Pick a shape from the dropdown — circle, ellipse, triangle, pentagon, hexagon, star, or rounded rectangle.
For circle, ellipse, and rounded-rect shapes, adjust the size/roundness slider to fine-tune the clip.
Watch the preview box update live as you change the shape or slider.
Copy the generated clip-path CSS and paste it onto the element you want clipped.
For an image instead of a solid color, apply the same clip-path property to an <img> or an element with a background-image.

Example

Input

Shape: Hexagon

Output

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

A regular hexagon clip, commonly used for badge-style profile photos or feature icons.

Basic shapes vs. polygon()

Circle, ellipse and inset (rounded rectangle) are built-in CSS basic shape functions with their own simple syntax — a radius or two, plus an optional center position or corner rounding. Triangle, pentagon, hexagon and star aren't built-in shapes; they're all expressed with polygon(), a flat list of x/y coordinate pairs tracing the shape's outline. This tool computes those coordinates for regular (evenly-spaced) polygons and a five-pointed star automatically, which is the tedious part to get right by hand.

Common clip-path patterns

Circular avatar or badge: circle() at a mid-range radius, often combined with a square source image so the circle isn't stretched into an ellipse.
Angled section divider: a custom polygon (not included as a preset here) that slants the top or bottom edge of a full-width section for a non-rectangular page break.
Star rating icon or badge shape: the star preset, useful as a decorative shape rather than hand-drawn SVG for simple cases.
Hexagon photo grid: hexagon-clipped images arranged in a honeycomb layout, a common portfolio/team-page pattern.
Rounded rectangle as a lightweight alternative to border-radius when you need the clip to also cut off overflowing child content, since border-radius alone doesn't clip children without additional overflow:hidden.

Pairing with other CSS tools

clip-path is frequently combined with a CSS gradient as the background being clipped, or with a box-shadow applied to a wrapping element (since clip-path also clips an element's own shadow, a shadow on a parent is the usual workaround for a clipped shape that still needs to appear to float).

→ CSS Gradient Generator · Border Radius Generator · Box Shadow Generator

Frequently Asked Questions

Does clip-path affect the element's layout size?

No — the element keeps its original box size and position for layout purposes; clip-path only changes what's painted. Surrounding elements are laid out as if the clip weren't applied, which can surprise you if you expect the clipped shape to behave like a resized element.

Why doesn't box-shadow show up on my clipped shape?

clip-path clips the entire element's rendering, including any shadow it casts, so a circle- or polygon-clipped element's own box-shadow gets cut off at the clip boundary. To get a shadow that follows the visible shape, apply box-shadow to an unclipped wrapping element around the clipped one instead.

Can I animate or transition a clip-path shape?

Yes, but only between two clip-path values of the same type and with the same number of points — for example, one polygon() with 6 points transitioning to another polygon() with 6 points. Transitioning between fundamentally different shapes (a circle() to a polygon()) generally won't animate smoothly across browsers.

Can clip-path be used on background images, not just element content?

clip-path clips the entire element — including its background-image, background-color, borders and content together — rather than the background specifically. If you only want to clip a background image while keeping other content unclipped, apply clip-path to a separate element that just holds the background.

Is clip-path supported in all modern browsers?

Yes — clip-path with basic shape functions (circle, ellipse, inset, polygon) has been Baseline widely available across major browsers since January 2020, per MDN's compatibility data. It's generally safe to use in production without a fallback for current browser versions.