Your files never leave your device. All processing happens locally in your browser.
How do I create a CSS clip-path shape?
Pick a shape function — polygon, circle, ellipse or inset — then drag the corner handles on the live preview (or move the sliders). The CSS Clip-Path Generator writes the clip-path value in real time and lets you copy it, with an optional -webkit- prefix. Everything runs 100% in your browser; nothing is uploaded.
Four shapes: polygon(), circle(), ellipse() and inset()
Drag vertices on the preview; double-click a handle to add a point
Preset shapes: triangle, star, hexagon, arrow, chevron, message, cross, frame and more
Preview against a solid color or your own image (read locally, never uploaded)
Copy the clip-path value, a -webkit- prefixed pair, or a ready .clipped rule
What is
CSS clip-path
clip-path is a CSS property that clips an element to a shape so only the region inside the shape is painted; the rest is hidden. It accepts basic-shape functions — polygon() (a list of x% y% vertices), circle(r at cx cy), ellipse(rx ry at cx cy) and inset(top right bottom left round radius) — with values as percentages of the element’s box, so the shape scales as the element resizes. It clips PAINT only: the element still occupies its full rectangular box, so surrounding layout is unaffected.
No. The shape and CSS are built entirely in your browser, and if you preview against your own image it is read from a local object URL — never uploaded, logged or stored.
The CSS Clip-Path Generator is 100% client-side. The shape is modelled and the clip-path value is generated with pure JavaScript in your browser tab — there is no server call and no CDN for processing. If you switch the preview to an image, that image is read locally as an object URL and applied to a div with background-image; it is never uploaded, logged or stored anywhere. Close the tab and everything is gone.
No. clip-path clips paint only — the element still occupies its full rectangular box, so nothing around it reflows into the clipped-away area.
clip-path affects painting, not layout. The element keeps its original rectangular box size, so siblings do not move into the hidden region and the element’s width and height are unchanged — only the visible paint is clipped to the shape. That also means clicks can still register on the invisible parts unless you adjust hit-testing. Because the coordinates are percentages of the element’s box, the shape scales with the element, which is handy for responsive layouts but can distort a shape tuned for one aspect ratio when the box changes shape.
All modern browsers — Chrome, Edge, Firefox and Safari. Only legacy Internet Explorer lacks it. Older Safari needs the -webkit-clip-path prefix.
CSS clip-path with basic shapes is supported across all modern browsers (Chrome, Edge, Firefox, Safari, and their mobile versions); only long-retired Internet Explorer ignores it. Some older Safari and Chrome versions only shipped the prefixed -webkit-clip-path, so the tool can emit both a -webkit-clip-path line and the unprefixed clip-path line for maximum compatibility. Test at real sizes, because complex polygons can look jagged or hurt paint performance on some devices.
polygon() takes a list of x% y% points; circle() is one radius at a center; ellipse() has two radii at a center; inset() is a rectangle inset from each edge, optionally with rounded corners.
polygon(x% y%, …) draws a straight-edged shape from a list of vertices — the most flexible, with a draggable handle per point. circle(r at cx cy) clips to a circle of radius r centred at cx cy. ellipse(rx ry at cx cy) is like circle but with separate horizontal and vertical radii. inset(top right bottom left round radius) clips to a rectangle pushed in from each edge, with an optional corner-radius — ideal for framing an image or cropping edges. All values here are percentages of the element’s box so the shape scales with it.
Detailed Explanation
📖How It Works
CSS Clip-Path Generator — Visual Shape Editor
The CSS Clip-Path Generator is a 100% client-side tool that visually builds the four CSS clip-path <basic-shape> functions — polygon(), circle(), ellipse() and inset() — and emits a ready-to-copy clip-path value. For polygons, a draggable handle sits on every vertex over a live preview: drag to reshape, double-click a handle to insert a point on that edge, remove points, or type exact percentages. For circle, ellipse and inset, sliders drive the radii, centre and edge insets. The shape can be previewed against a solid color or a user-supplied image, and the value updates in real time.
Four shapes: polygon(), circle(), ellipse(), inset()
Draggable vertex handles on a live preview; double-click to add a point
Preview against a solid color or your own image (read locally, never uploaded)
Copy the value, a -webkit- prefixed pair, or a ready .clipped { … } rule
⚙️Methodology
How the Shape Is Modelled and Serialised
A pure engine (clipPathEngine.ts) models a shape as { type, points, circle, ellipse, inset } where all coordinates are percentages of the element’s box (0–100). polygon() serialises the point list to “x% y%, …”; circle() to “r at cx cy”; ellipse() to “rx ry at cx cy”; and inset() to “top right bottom left [round radius]”, omitting the round clause when the radius is zero. Every preset is expressed as a polygon so its handles are draggable and editable. Pointer events map cursor position to percentage coordinates against the preview’s bounding box (using setPointerCapture for smooth drags), and helper functions add, insert-on-edge, remove and move vertices immutably — a polygon is kept to at least three points. Values are clamped to 0–100 and rounded, and the copyable output can prepend -webkit-clip-path for older engines.
Shape model: { type, points[], circle, ellipse, inset } — all values are % of the box
toClipPathValue() serialises each basic-shape function to a valid clip-path value
Pointer events → percentage coordinates; setPointerCapture for smooth dragging
Optional -webkit-clip-path prefix line for older Safari / Chrome
⚠️Limitations
How clip-path Behaves — Paint, Not Layout
The tool is prominently HONEST about how clip-path works. It clips PAINT only: the element still occupies its full rectangular box, so its size and the flow of surrounding content are unaffected — nothing reflows into the clipped-away area, and pointer hits can still register on the invisible parts unless hit-testing is adjusted. Because the coordinates are percentages of the element’s box, the shape SCALES as the element resizes — excellent for responsive layouts, but a shape tuned for a square can distort on a wide or tall box. Very complex polygons (many points), and especially animating a clip-path, can hurt paint performance and produce jagged antialiasing on some browsers. clip-path with basic shapes is supported in all modern browsers (Chrome, Edge, Firefox, Safari); only legacy Internet Explorer lacks it, and older Safari needs the -webkit- prefix. Users should keep point counts reasonable and test at real sizes and on mobile.
Clips paint only — the element keeps its full box; layout is unaffected
Percentages are relative to the element’s box, so the shape scales (and can distort)
Very complex polygons / animating clip-path can hurt performance and antialiasing
Supported in all modern browsers; only legacy IE lacks it; older Safari needs -webkit-
Test responsiveness at real sizes and on mobile
🔒Privacy & Security
Why It Is Private by Design
Everything happens on the user’s device. The shape is modelled and the clip-path value is generated with pure JavaScript in the browser tab — there is no server call and no CDN for processing. When the preview is switched to an image, that image is read locally as an object URL and applied as a background; it is never uploaded, logged or stored, and the object URL is revoked when replaced. The output is plain text (a CSS value/rule) copied to the clipboard. Because it is client-side, the tool works offline once loaded and leaves nothing on a server.
Shape and CSS are built entirely in the browser — no upload, no CDN, no server
A previewed image is read via a local object URL and never leaves the device
Output is plain CSS text copied locally to the clipboard
Works offline after first load; nothing is stored server-side
All values are percentages of the element’s box, so shapes scale with the element. clip-path clips PAINT only — the element keeps its full box and layout is unaffected. Supported in all modern browsers; older Safari needs the -webkit-clip-path prefix. As of July 2026.
