CSS Clip-Path Generator
Drag the points, copy the code. This CSS Clip-Path Generator is a visual polygon editor: move the handles on the preview and the clip-path value underneath updates as you go, in percentages, so the shape scales with whatever element you apply it to.
What the tool does:
- Drag points on the live preview to reshape the polygon; right-click a point to delete it
- 18 presets to start from: triangle, trapezoid, parallelogram, rhombus, pentagon through octagon, star, cross, message bubble, arrows, chevrons, plus circle, ellipse and rounded rectangle
- Percentage output so one value works at every element size
- Copy the finished
clip-path: …;declaration in one click, or Reset Shape to start over
The circle, ellipse and rounded-rectangle presets copy out as circle(), ellipse() and inset() values. Everything you draw by hand is a polygon(). There is no path() mode and no pixel-unit switch; for curves beyond what a polygon can approximate, the SVG route further down is the one to take.
How to Use This Clip-Path Generator
- Pick a preset from the panel on the right, or keep the default shape
- Drag any point to move it. Right-click a point to remove it and simplify the outline
- Watch the value under the preview. It is the exact
clip-pathdeclaration, already in percentages - Click Copy and paste it into the rule for your image, card or section
- Test on the real element at a couple of widths, since percentages follow the element's own box, not the preview's
A diagonal hero cut is the most common thing people build here. Four points, one edge angled:
.hero {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}The rest of this page covers what the property can do beyond polygons, how coordinates and reference boxes behave, and where a generated shape tends to break once it's live.
What Is a CSS clip-path Generator?
A CSS clip-path generator is a browser-based tool that builds clip-path values through a visual interface instead of hand-typed coordinates.
It sits on top of the clip-path property itself, which comes from the CSS Masking Module and hides everything outside a chosen shape.
The property is native to CSS, so the generator's whole job is translation, turning dragged points into a syntax the browser already understands.
What makes it different from a plain code snippet is the feedback loop: you move a handle, the shape updates on screen, and the matching polygon() or circle() string updates with it.
No compiling, no separate preview step, no guessing at percentages.
In short:
- Category: an interactive shape-editing tool
- Function: converts dragged points into ready-to-paste CSS
What Basic Shape Functions Does clip-path Support?
Five basic shape functions cover almost everything a generator can output: polygon(), circle(), ellipse(), inset(), and path().
Each one takes a different kind of input. Some generators switch editing mode depending on the function; this one edits polygons and serves the other shapes as presets.
path() is the odd one out, since it accepts raw SVG path data.
That's how a generator can hand you curves that plain polygon math cannot produce.
/* the same idea in three functions */
.avatar { clip-path: circle(50% at 50% 50%); }
.card { clip-path: inset(0 0 0 0 round 16px); }
.badge { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }| Shape Function | Input | Typical Shape |
|---|---|---|
| polygon() | list of x/y coordinate pairs | triangles, stars, custom cuts |
| circle() | radius and center point | avatars, badges |
| ellipse() | two radii and center point | blob-style crops |
| inset() | offsets from each edge | rectangular crops, rounded cards |
| path() | SVG path data string | irregular, hand-drawn shapes |
The inset() function also accepts rounded corners, using the exact same value pattern as a standard border-radius generator.
The shape function list keeps growing. Chrome shipped a sixth option, shape(), in Chrome 135, with Safari following at version 18.4.
It clips to responsive, non-polygon outlines, curves included, without needing a separate SVG file.
Reference Box and Coordinate Units in clip-path
Clip-path coordinates come in a few different units, and the choice affects how the shape behaves once the page resizes. This generator writes percentages only, which is the right default for anything that has to resize.
- Percentage values: scale with the element, so the shape holds its proportions as the box resizes
- Pixel values: stay fixed, useful for a shape that should never stretch, like a badge cutout
- Viewport units: tie the shape to the browser window instead of the element
That viewport-relative option matters most on full-bleed sections, where the shape needs to track the browser viewport rather than a parent element.
Percentage-based coordinates, meanwhile, are what make a clipped shape part of genuine responsive design. The points move proportionally at every breakpoint.
Every coordinate is also measured against a specific reference box, and the box you pick decides where "0%" actually starts.
| Reference Box | Measured From | Common Use |
|---|---|---|
| border-box | outer edge of the border | default for most elements |
| padding-box | inner edge of the border | cards with visible borders |
| content-box | edge of the content area | text-heavy clipped elements |
| fill-box / stroke-box | SVG object bounding box | clipping SVG graphics |
Switching the reference box without adjusting the coordinates is a common reason a generated shape looks right in the tool but shifts once it's live.
How Does a clip-path Generator Turn a Shape Into CSS Code?
Drag a point, and the generator recalculates the shape function behind the scenes, in real time.
There is no separate "generate" button in most tools, because the code is always current.
Common editing methods:
- Drag handles on a live preview image
- A point-by-point editor with numeric input fields
- Freehand drawing for irregular, path-based shapes
Once you're happy with the shape, the tool hands you one of two outputs.
Most generators default to a ready clip-path declaration you paste straight into a stylesheet.
A handful export raw SVG path data instead, useful if you're building the shape inside an SVG document rather than a CSS rule.
How Does clip-path Behave in Animations and Transitions?
clip-path animates just like any other CSS property, through a transition rule or a full animation sequence.
It's driven by two mechanisms in particular: transitions for simple state changes, and CSS keyframes for multi-step sequences.
Matching points: a shape with the same number of coordinates at both ends morphs smoothly.
Mismatched points: a different point count between the two states makes the shape snap instead of tween.
Pairing the transition with a custom cubic-bezier easing curve is a common way to make a shape reveal feel less mechanical.
.card {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1);
}
.card:hover {
/* same four points, so the shape tweens instead of snapping */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}Which Browsers Support clip-path, and What Happens When They Don't?
Browser support for clip-path is no longer a real risk, and the numbers back that up.
- Widely available since January 2020: clip-path reached Baseline status across major browsers, per MDN
- 96% global support: Can I Use tracks clip-path support at roughly 96% of tracked browser traffic
- Prefix removed in 2024: WordPress core dropped -webkit-clip-path from its CSS after Chrome 24 to 54 usage fell to 0.1% and Safari below 13 fell to 0.05%
That baseline label matters because it signals the feature is safe to ship without a polyfill in ordinary projects.
It does not mean every function inside clip-path arrived at the same time, since newer additions like shape() are still catching up across engines.
In a browser that ignores the property entirely, three things typically follow:
- The element renders at full size and shape, unclipped
- Nothing else on the page breaks, since clip-path only affects paint
- Any hover or animation tied to the shape simply does not run
Writing a plain background or border rule ahead of the clip-path declaration is enough of a fallback for most designs. It also helps cross-browser compatibility testing catch the gap early.
What Is a CSS clip-path Generator Used For?
Most real use cases fall into a handful of repeatable design patterns, not one-off experiments.
- Diagonal section cuts that break up an otherwise rectangular page
- Shape dividers between a header and the content below
- Hover-reveal effects on product cards and thumbnails
- Blob or organic crops for portrait and illustration images
Diagonal cuts show up most often in a landing page hero section, where a single angled edge separates the intro from the next block of content.
Triangular cutouts follow the same polygon math that powers a dedicated CSS triangle generator, just applied to a photo or a card background instead of a plain box.
None of this is a mainstream layout technique, and the data backs that up. clip-path appears on only about 0.06% of all Chrome page loads tracked by Chrome's own usage counters.
That low number fits a tool used for a deliberate visual accent, not something every site needs.
Which clip-path Generator Tool Should You Use?
Four tools cover almost every workflow, and the right pick depends on whether you're starting fresh or editing a shape that's already live on a page. The generator on this page sits in the same slot as Clippy: drag handles, polygon output, presets, nothing to install.
| Tool | Editing Method | Output | Best For |
|---|---|---|---|
| Clippy | drag handles on a preview image | polygon() string | quick, one-off shapes |
| Firefox DevTools | on-page point editing of a live element | updates existing CSS in place | fine-tuning a shape already in your stylesheet |
| Figma | drag vector points on a frame | no code, exported manually | prototyping before writing any CSS |
| CodePen | freeform code with a live preview | shareable public URL | documenting or sharing a shape |
Clippy, built by developer Bennett Feely, is the best-known way to get a polygon() string with nothing installed.
Firefox's Shape Path Editor works differently. It edits the clip-path value already sitting in your CSS Rules panel rather than generating a new one from scratch.
Chrome has no native equivalent built into DevTools. The closest option is a third-party extension that hasn't been updated since 2015.
If you're mocking up a layout before any CSS exists, cutting a shape in Figma is usually faster than fighting with coordinates in a browser tool.
Two questions narrow the choice quickly:
- Do you need the shape once, or will you keep adjusting it as the layout changes
- Does the shape already exist on a real page, or are you starting from a blank canvas
When Should You Use clip-path Instead of CSS Mask or the SVG clipPath Element?
All three can hide part of an element, but they solve different problems.
clip-path:
- Pro: hard-edged shapes with a short, readable syntax
- Con: cannot fade or soften an edge
CSS mask:
- Pro: gradient and image-based transparency, not just a shape
- Con: heavier on paint performance over large areas
SVG clipPath:
- Pro: one shape definition reused across several elements
- Con: lives in markup rather than the stylesheet, easy to lose track of
The gradient side of that comparison is plain CSS: mask-image takes the same gradient syntax used everywhere else, so a CSS gradient generator covers the value and you swap the property name.
The SVG <clipPath> element has actually been stable longer than the CSS property built to reference it, Baseline widely available since July 2015.
path() itself arrived years after clip-path did, landing in Chrome 88, Firefox 71, and Safari 13.1, according to browser compatibility data tracked by MDN.
How Do You Build a Shape With a CSS clip-path Generator?
The workflow barely changes from one generator to the next.
- Pick a starting shape function, usually polygon() for a custom cut or circle() for a simple crop
- Drag points on the preview until the outline matches what you want
- Switch the coordinate unit to percentage if the shape needs to resize with its container (this generator is already there)
- Copy the generated clip-path declaration into your stylesheet
- Test the shape at a few screen widths with media queries, since a shape that looks right at one width can drift at another
Two mistakes explain most "it worked in the tool but not on my site" complaints.
- Copying pixel coordinates from a preview that used a different element size than the real page
- Forgetting that percentage points are measured against the reference box, not the full browser window
When Does clip-path Not Work?
clip-path fails quietly. Nothing throws an error, the shape just doesn't behave the way it looked in the generator.
- Clicks vanish with the clip: by default, pointer events are not dispatched inside the clipped-out region, so a button partly hidden by a shape stops receiving clicks there (MDN)
- z-index can shift unexpectedly: any clip-path value other than none creates a new stacking context, the same way opacity does for values below 1. That can quietly change how overlapping elements layer
- Resizing breaks the math: percentage coordinates are locked to the reference box at render time. A box that changes size through JavaScript rather than CSS can leave the shape looking cut off in the wrong place
None of this shows up in a generator's preview, since the preview is a single, static snapshot of one element size.
Testing the shape inside the actual page, at more than one width and with real interactive elements underneath it, catches all three before they ship.
FAQ on CSS Clip-Path Generator
What's the difference between clip-path and shape-outside?
clip-path hides parts of an element visually, while shape-outside only changes how inline text wraps around a floated element.
Both share the same basic shape functions, but shape-outside never touches what the element itself paints.
Can clip-path be combined with CSS transform?
Yes. clip-path and transform apply independently, so scaling, rotating, or translating an element does not disable its clip.
The shape stays anchored to the element's reference box, moving and resizing along with whatever transform is applied.
Does clip-path hurt page performance?
Simple shapes like circle() or polygon() are cheap to render and rarely cause a measurable slowdown.
Complex path() shapes recalculate on every animation frame, so clipping a large, frequently animated element costs more than clipping a small static one.
How do you make a clip-path shape responsive across breakpoints?
Percentage coordinates scale automatically, but they can distort a shape when the aspect ratio shifts sharply between breakpoints.
Writing a separate clip-path rule inside a media query, instead of one percentage shape for every width, keeps proportions intentional rather than accidental.
Can clip-path be applied to background images?
Yes, though not selectively. clip-path clips the whole element box at the paint stage, so any background image, color, or border gets cut along with the foreground.
To clip just the background, and leave text or icons untouched, give the background its own element.
What Should You Check First With a CSS clip-path Generator?
A CSS clip path generator earns trust only after its output survives three checks. The reference box matches the live element, the coordinate units hold up at more than one screen width, and the shape still receives clicks where a visitor expects them.
The order looks like this:
- Match the reference box first
- Resize the browser second, checking for percentage drift
- Click through the shape third, confirming nothing important gets swallowed
Running the click test before the resize test saves a first pass but risks a shape that looks right and sits wrong once the layout shifts.
This order holds for the browser landscape verified in September 2026. It loosens once newer basic shape functions close the remaining gap between engines.
Once a shape passes all three checks, animating it is the logical next step. A dedicated CSS animation generator handles the keyframe timing without hand-written easing curves.