What's the browser support for clip-path?

Excellent. `clip-path` with `polygon()`, `circle()`, `ellipse()`, and `inset()` shape functions is supported in every evergreen browser — Chrome, Edge, Safari (since 9.1), Firefox (since 54), and all mobile WebKit/Blink browsers. The only thing to be careful about is the legacy `-webkit-` prefix: modern Safari no longer requires it, but if your audience includes very old iOS (≤ 13), ship both `-webkit-clip-path` and `clip-path`. The `path()` shape function (SVG path data inside clip-path) has slightly thinner support but is solid in Chrome 88+, Firefox 97+, and Safari 14+.

Why use clip-path instead of an SVG mask?

Three reasons. (1) `clip-path` is a CSS property — you author it alongside the rest of your styles, animate it with `transition`, and don't need a separate ` ` element in your DOM. (2) It's cheaper to render: the browser clips at the compositor, while SVG mask requires an offscreen buffer pass. (3) It composes with everything — `border-radius`, `box-shadow`, `transform`, `filter` — without the layering gymnastics SVG masks require. Use SVG mask when you need a soft-edged (alpha-gradient) mask or a raster image as the mask; for crisp geometric shapes, `clip-path` is the right tool.

Can I animate clip-path?

Yes, and animations between two shapes of the same type are interpolated point-by-point — a polygon with N vertices smoothly morphs into another polygon with N vertices, a circle's radius tweens, inset values tween independently. The gotcha: you cannot animate between different shape functions (polygon ↔ circle won't tween) and you cannot animate between polygons with different vertex counts. If you need a morph between dissimilar shapes, author both endpoints as polygons with the same vertex count (collapse extra points onto a coincident location).

Does clip-path affect hit testing on the clipped-away area?

Yes — by default, pointer events follow the visible clipped shape. A click on the area that was clipped away does not hit the element; it falls through to whatever is behind. This is usually what you want (the visual and interactive shape match), but if you need the original rectangle's hit area, override with `pointer-events: auto` on a parent wrapper and `pointer-events: none` on the clipped child, then put a transparent rectangle-shaped sibling on top to capture clicks.

How do I make a complex shape like a banner or ribbon?

Start with the polygon mode and pick the closest preset — the `chevron`, `arrow`, and `cut-corner` presets cover most ribbon and banner geometries. Drag individual vertices to fine-tune the notch depth or arrow angle. For a classic banner with a notched tail, use a 7-point polygon: four corners of the main rectangle plus three points forming the V-notch on one edge. If you need curves (not just straight edges), you've hit the limit of `polygon()` — switch to an SVG with ` ` and ` `, or use `clip-path: path('M...')` directly with SVG path data.

Crop a team headshot into a hexagon for an About page

Your design uses hexagon avatars but the photos are square JPGs. Instead of masking each one in Photoshop, set the image to 200x200 and apply the hexagon preset, then nudge the top vertex to 0% and bottom to 100% so the points sit flush. One `clip-path:polygon()` line styles all 8 team members, and swapping a photo never breaks the crop because the shape lives in CSS, not the file.

Build an angled section divider between two background colors

Landing pages often slope from a dark hero into a light section. Use inset mode with a 0% top inset and drag the bottom-left corner, or switch to a 4-point polygon like `0 0, 100% 0, 100% 92%, 0 100%` for a 1-2 degree slant. Copy it onto the lower section's wrapper. No SVG, no extra DOM node, and it reflows cleanly from 1440px down to a 375px phone because the points are all percentages.

Make a notched ribbon badge for a "Sale" tag

A pricing card needs a small ribbon reading "30% OFF" with a V-notch tail. Start from the chevron preset, then add two vertices on the right edge and pull the middle one inward to about 85% to carve the notch. The generated 7-point polygon drops straight into your `.ribbon` class. Because it is a real DOM element you keep the text, padding, and box-shadow that an SVG path would force you to rebuild.

Reveal an image on hover by animating inset

You want a card image to wipe in from the left on hover. Generate two inset values, `inset(0 100% 0 0)` collapsed and `inset(0 0 0 0)` open, then transition between them. The tool gives you the exact syntax for both keyframes. Inset animates each edge independently, so a 250ms `transition: clip-path` produces a smooth left-to-right reveal without any JavaScript or a masking overlay.

CSS Clip-Path Generator — Polygon, Circle, Ellipse, Inset

Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Shape type

Presets

Vertices (6)

Drag the dots on the preview to reshape. Click the preview to add a vertex (polygon mode).

Vertices

#1%

#2%

#3%

#4%

#5%

#6%

Preview

CSS output

clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);

What this tool does

A visual editor for CSS `clip-path` — drag control points directly on the preview to shape polygons, circles, ellipses, and insets, with the generated `clip-path:` declaration updating live on every move. Switch shape modes from a single toggle: polygon (add/remove vertices, drag each one to any percent position), circle (drag the center + radius handle), ellipse (independent rx/ry handles), and inset (four edge sliders plus an optional corner radius). The preview is a real DOM element with the same property your output panel shows, so what you drag is what ships — no preview/production drift. Nine production-grade presets cover the shapes you actually need: triangle, pentagon, hexagon, five-pointed star, six-pointed star, eight-pointed star, chevron, arrow, cut-corner card, and message bubble. One-click copy gives you a paste-ready CSS declaration — drop it into a stylesheet, a Tailwind arbitrary value `[clip-path:polygon(...)]`, or a React inline style. 100% client-side: nothing leaves the browser. Great for cropping images into non-rectangular shapes, building decorative section dividers, masking hero banners, or designing badges and ribbons without firing up Figma.

Tool details

Input: Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: No account required; Open the page and use it; whether results survive refresh depends on the tool.
Performance budget: Initial JS <= 22 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Clip-Path Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Crop a team headshot into a hexagon for an About page
Your design uses hexagon avatars but the photos are square JPGs. Instead of masking each one in Photoshop, set the image to 200x200 and apply the hexagon preset, then nudge the top vertex to 0% and bottom to 100% so the points sit flush. One `clip-path:polygon()` line styles all 8 team members, and swapping a photo never breaks the crop because the shape lives in CSS, not the file.
Build an angled section divider between two background colors
Landing pages often slope from a dark hero into a light section. Use inset mode with a 0% top inset and drag the bottom-left corner, or switch to a 4-point polygon like `0 0, 100% 0, 100% 92%, 0 100%` for a 1-2 degree slant. Copy it onto the lower section's wrapper. No SVG, no extra DOM node, and it reflows cleanly from 1440px down to a 375px phone because the points are all percentages.
Make a notched ribbon badge for a "Sale" tag
A pricing card needs a small ribbon reading "30% OFF" with a V-notch tail. Start from the chevron preset, then add two vertices on the right edge and pull the middle one inward to about 85% to carve the notch. The generated 7-point polygon drops straight into your `.ribbon` class. Because it is a real DOM element you keep the text, padding, and box-shadow that an SVG path would force you to rebuild.
Reveal an image on hover by animating inset
You want a card image to wipe in from the left on hover. Generate two inset values, `inset(0 100% 0 0)` collapsed and `inset(0 0 0 0)` open, then transition between them. The tool gives you the exact syntax for both keyframes. Inset animates each edge independently, so a 250ms `transition: clip-path` produces a smooth left-to-right reveal without any JavaScript or a masking overlay.

Common pitfalls

Forgetting `-webkit-clip-path` for old iOS (≤13). If a Safari user reports a square where you expect a star, ship both `-webkit-clip-path` and `clip-path` declarations.
Trying to tween between different vertex counts. A 3-point triangle will not animate into a 6-point hexagon; rewrite both keyframes with the same vertex count, doubling up points if needed.
Putting a `box-shadow` on the clipped element itself. clip-path cuts the shadow too, so the shadow vanishes; move the shadow to a parent wrapper or use a `filter: drop-shadow()` instead.

Privacy

Everything runs in your browser. The shapes you drag, the presets you pick, and the generated `clip-path` string never touch a server. The current shape is encoded into the page URL so you can share or bookmark a design, which means the geometry values live in that link if you send it to someone, but no images you preview against are ever uploaded.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Clip-Path Generator — Polygon, Circle, Ellipse, Inset

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Clip-Path Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Crop a team headshot into a hexagon for an About page

Build an angled section divider between two background colors

Make a notched ribbon badge for a "Sale" tag

Reveal an image on hover by animating inset

Common pitfalls

Privacy

FAQ

CSS Formatter & Minifier

CSS Border Radius Generator

SVG Blob Generator

CSS Gradient Generator

CSS Box Shadow Generator

CSS Loaders Generator

Favicon Generator

Avatar Generator

Font Pairing Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter