CSS Clip Path Generator — Polygon, Inset, Circle & Ellipse
Generate a CSS clip-path value for any non-rectangular shape — triangles, hexagons, stars, arrows, chevrons, circles, and ellipses. Edit exact vertex coordinates, see a live preview, start from ten presets, and copy CSS, Tailwind v4, or SCSS. Free and 100% client-side.
Vertices (3)
Presets
Four Shape Modes
Polygon (arbitrary N vertices), inset (rectangle with optional radius), circle (centred or off-centre), and ellipse — every clip-path basic-shape function with full browser support.
Vertex-Level Editing
Edit any vertex by typing exact percentage coordinates. Add or remove vertices to build custom shapes. Reorder with arrows to control the polygon's winding direction.
Multi-Format Output
Copy the CSS value, full declaration (with optional `-webkit-` prefix for old Safari), Tailwind v4 arbitrary-property value, or SCSS variable. Tailwind output is escape-safe.
100% Client-Side
Custom brand shapes, illustration accents, hero callout containers — all stay in your browser. No upload, no save.
CSS Clip Path Generator: Build Polygon, Inset, Circle & Ellipse Shapes
A CSS clip-path generator builds the clip-path value that clips an element to a non-rectangular shape. Pick a mode — polygon, inset, circle, or ellipse — drag a vertex or slider, watch the live preview, then copy the result as CSS, Tailwind v4, or SCSS. It runs 100% in your browser, free, with no upload.
How to use the CSS clip-path generator
- Pick a shape mode: Polygon for arbitrary N-vertex shapes, Inset for clipped rectangles, or Circle / Ellipse for rounded clips.
- Start from one of the ten presets (triangle, hexagon, pentagon, 5-star, arrow, parallelogram, chevron, circle, ellipse, inset window), then fine-tune from there.
- For polygons, edit any vertex coordinate directly, add or remove points (up to 16), and reorder with the arrows to fix the winding direction.
- For inset, circle, and ellipse, drag the sliders — inset offsets and an optional
roundradius, circle radius and center, or ellipse rx/ry and center. - Toggle "With -webkit- prefix" if you support old Safari, then copy the CSS value, full declaration, Tailwind v4 class, or SCSS variable.
What is CSS clip-path and how does it work?
clip-path clips an element to a region; only the inside of that region renders, and everything outside it is invisible to both painting and hit-testing. The clipped shape is the element — content inside still flows normally and click events fire only on the visible area. This tool emits the four basic-shape functions with universal support, so you skip the old workarounds of stacked pseudo-elements, background images, or an SVG <clipPath>.
Coordinates are percentages of the element box, and the y-axis points down: 0% 0% is top-left, 100% 100% is bottom-right. Polygons need at least 3 points and have no upper limit in the spec (this builder caps the editor at 16). For the exact grammar and the full list of accepted values, see the MDN <basic-shape> reference.
Worked examples: shape → value
Triangle · polygon (3 vertices)
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Circular avatar · circle
clip-path: circle(50% at 50% 50%);
Rounded inset window · inset with radius
clip-path: inset(15% 15% 15% 15% round 10%);
Edge case · triangle → square animation
A transition only interpolates when both shapes share the function and the vertex count. To morph a triangle into a square, pad the triangle to four points by duplicating one vertex — e.g. polygon(50% 0%, 100% 100%, 100% 100%, 0% 100%) → polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%). Mismatched counts snap instead of morphing.
The Four CSS Basic-Shape Functions
| Function | Syntax | Best For |
|---|---|---|
| polygon() | polygon(0 0, 100% 0, 50% 100%) | Triangles, hexagons, stars, arrows, custom shapes |
| inset() | inset(10% 10% 10% 10% round 8%) | Rectangles with margins, ticket cutouts, framed images |
| circle() | circle(50% at 50% 50%) | Avatars, profile photos, decorative dots, focus indicators |
| ellipse() | ellipse(50% 30% at 50% 50%) | Oval avatars, banner mask shapes, organic-feeling crops |
Where each clip-path shape is useful in production UI
Hexagonal Avatars
Team-page photos in a hex grid feel modern without resorting to SVG masks. Common on gaming, esports, and creative agency sites.
Chevron Section Dividers
Wide hero with chevron bottom edge that bleeds into the next section. Clip-path is dramatically cheaper than an SVG path.
Arrow CTA Buttons
Polygon arrows make "Next" / "Get Started" buttons feel directional. Pair with hover animation that translates left.
Parallelogram Banners
Skewed promotion banners with crisp diagonals. Cheaper and more flexible than CSS `transform: skew()` which distorts text inside.
Blob Hero Backgrounds
Soft, organic shapes behind hero text. Animate between two equal-vertex polygons for a slowly morphing blob.
Ticket Stub Cards
Inset clipping with negative-margin pseudo-elements gives that punched-edge ticket look for event tickets, vouchers, and receipts.
Four Clip-Path Pitfalls (and How to Avoid Them)
1. Box-Shadow Disappears
Shadows are clipped along with the element. Use filter: drop-shadow() on the parent instead — it shadows the visible shape, not the box.
2. Hit Area Too Small
A 24×24 star-shaped icon button has a hit area of maybe 12×12 — fails WCAG 2.5.5. Pad the parent or add a transparent rectangular overlay for clicks.
3. Animation Snaps Instead of Morphing
Source and target must have the same shape function AND the same vertex count. Add a vertex to one shape to match the other before transitioning.
4. Overflow Hides Children
Tooltips, dropdowns, and other overflow children get clipped along with the parent. Move them out of the clipped element entirely.
The fill-rule trap most generators skip
polygon() accepts an optional fill-rule before its points — nonzero (the default) or evenodd. The two diverge only for self-intersecting polygons: with crossing edges, evenodd leaves the overlapping interior empty while nonzero fills it solid. The per-MDN grammar is polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# ).
This builder emits a plain, non-overlapping vertex list (e.g. polygon(50% 0%, 100% 100%, 0% 100%)), so nonzero and evenodd render identically for every preset here — including the 5-star, whose points are arranged so edges never cross. If you hand-author a true crossing-edge shape (a pinwheel or overlapping ribbon) and the center renders solid when you wanted a hole, prepend evenodd, to the points.
Runs 100% in your browser
Your shapes never leave your device. Each clip-path value is built locally in JavaScript and copied with your browser's native clipboard — nothing leaves your device. I tested all four modes across the ten presets, pushed a polygon to the 16-vertex cap, toggled the -webkit- prefix, and confirmed the Tailwind v4 output (spaces escaped to underscores) pastes straight into a class attribute. The live preview stays instant on every edit.
Related CSS & design tools
Round rectangle corners when clip-path is overkill
CSS Gradient GeneratorFill the clipped shape with a gradient
CSS Filter GeneratorAdd drop-shadow that follows the clipped edge
CSS Box Shadow GeneratorBox shadows for the unclipped rectangle case
Glassmorphism GeneratorFrosted-glass panels behind clipped shapes
Flexbox GeneratorLay out a row of hexagon or chevron cards
Grid GeneratorBuild a CSS grid for a clipped avatar wall
CSS BeautifierFormat the rule set that holds your clip-path
CSS MinifierShrink the stylesheet before you ship
CSS Specificity CalculatorCheck which selector wins the clip-path rule
Color ConverterConvert the fill color between HEX, RGB & HSL
Color Palette GeneratorSource the brand fill color for your shape
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.