CSS Clip Path Generator

What This Tool Does

This is a visual CSS clip-path builder. You pick a shape family from the chip row at the top of the tool — polygon, circle, ellipse, inset, or a named preset — and edit that shape directly in the preview canvas. Polygons expose individual draggable vertex handles so you can shape them by sight; circles, ellipses, and insets expose slider controls for their numeric parameters. The fifth tab, presets, gives you eight common building blocks (triangle, pentagon, hexagon, star, arrow, cross, diamond, chevron) that load instant polygon coordinates ready for further editing.

Every move you make in the preview updates the generated CSS in real time and re-applies the clip to the live gradient swatch above it, so you see exactly what the browser will render for your element. The clip-path declaration appears in a copy-ready text box at the bottom of the panel, and the Copy and Download buttons hand you either the property string for the clipboard or a standalone .css file. Nothing leaves your browser; the entire generator runs locally in vanilla JavaScript with no analytics keystroke logging.

The supported function set covers the four basic shape primitives defined by CSS Masking Module Level 1 — polygon(), circle(), ellipse(), and inset() — which together represent the bulk of real-world clip-path usage. The fifth syntax, path(), takes an SVG path string and is briefly explained in the operator reference below, but the visual editor focuses on the four primitives because they cover the cases most designers actually reach for in production.

How to Use It

The fastest path to a working clip-path is to pick a preset that resembles the shape you want, drag a few vertices to refine it, then copy the CSS. Each of the steps below walks through one phase of that workflow.

Choose a Shape Family

Click one of the chip buttons at the top of the tool: Polygon, Circle, Ellipse, Inset, or Presets. The control panel below the chips swaps to match — polygons show a vertex list, the round shapes show radius and center sliders, and inset shows four edge sliders plus a corner rounding slider. The presets tab is a launcher: clicking any preset loads its polygon coordinates and switches you back into polygon mode for further editing.

Drag Vertices Directly on the Preview

In polygon mode, each vertex appears as a small white dot with a green border on top of the gradient swatch. Press a dot with the mouse or with a finger and drag it; the live preview clips immediately as the percentages update. Touch input is supported on tablets and phones, so you can shape clip-paths on the device they will render on. The numeric vertex list to the side updates in lockstep, and you can also edit the percentage values in those number inputs directly when you need pixel-accurate placement.

Add, Remove, or Reset Vertices

The + Add Vertex button drops a new vertex at 50%, 50% — drag it where you want it. The Remove Last button strips the most recently added vertex, with a hard minimum of three (the smallest polygon that still renders as a shape). The presets tab is the cleanest way to start over; clicking any preset replaces the current vertex list entirely.

Adjust Slider-Driven Shapes

Circle, ellipse, and inset modes use sliders instead of vertex handles. Circles take a single radius and a center position; ellipses take separate X and Y radii and a center; insets take four edge offsets (top, right, bottom, left) plus an optional round corner radius. The display value next to each slider updates in real time, and so does the generated CSS string below the preview.

Copy or Download the Generated CSS

The Copy button places the full clip-path: ...; declaration on the clipboard. The Download button writes that same line into a clip-path.css file you can drop into any project. Both produce the exact string you see in the output box — there is no minification, prefix injection, or vendor-specific rewriting happening behind the scenes.

Common Use Cases

Hero Section Corner Cutouts and Diagonal Slashes

The most common production use of clip-path is exactly the worked example above: cutting a polygon notch out of a hero or banner section so the page flows visually into the next section. Diagonal slashes (a polygon with one corner pulled inward) and chevron notches are everywhere in modern marketing pages because they break the rigid horizontal-band layout that dominates conventional designs. A single seven-vertex polygon replaces what used to require absolutely-positioned SVG overlays or stacked colored triangles.

Image Masks: Circles, Hexagons, and Avatar Frames

Team grids and testimonial sections frequently mask user photos into circles or hexagons. clip-path: circle(50%) on a square image produces a perfectly round avatar without needing a separate cropped image asset; clip-path: polygon(...) with hexagon coordinates handles the popular hex-tile portrait style used in honeycomb layouts. The advantage over border-radius is that any polygon shape works, not just rounded corners, and the same clip can be applied to <video> elements.

Badge and Ribbon Shapes

Star, chevron, and arrow polygons make sale badges and "Featured" ribbons trivial. A five-pointed star badge is one clip-path: polygon(...) line applied to a colored <div>; a corner ribbon is a four-vertex polygon. This approach renders crisply at any size because the polygon is resolved against the element's box, not against a fixed bitmap, and it scales with the element automatically.

Partial Reveal Animations and Wipe Transitions

Animating clip-path: inset(...) values lets you build wipe-in transitions from any edge: inset(0 100% 0 0) hides everything, inset(0) reveals fully, and the in-between values produce a smooth horizontal wipe. The same pattern with circle(0%) growing to circle(150%) at the element's center yields the iris-style transition popular in case-study scroll effects. CSS Transition Generator can help you author the timing function and duration to pair with the clip-path keyframes.

Edge Cases and Limitations

A few quirks consistently surprise developers the first time they ship a clip-path beyond the demo stage. Knowing them up front saves debugging time.

Clip-path transitions only interpolate within the same shape function. A keyframe that goes from polygon(...) to circle(...) does not animate; the browser snaps directly to the end state at the halfway mark or skips animation entirely. To morph between visually different forms, express both as polygons with identical vertex counts — placing duplicate points along straight edges of one shape to match the vertex count of the other when needed. Within a single shape function, transitions are smooth as long as the parameter counts match.

The path() function is recent enough that you may still hit older browsers. Chromium added clip-path: path() in version 88 (January 2021), Firefox in 97 (February 2022), and Safari in 13.1 (March 2020). It is safe in mainstream desktop and mobile traffic today, but if you are supporting legacy enterprise installs or older embedded WebViews, fall back to polygon approximation. The shape() function — a CSS-native alternative to path() that takes individual line, curve, and arc commands — is even newer and not yet at universal baseline support.

SVG clip-path and CSS clip-path are different mechanisms despite sharing a name. SVG clip-path is declared inside an SVG document using a <clipPath> element and referenced from CSS with clip-path: url(#id). It supports arbitrary SVG geometry and can clip both SVG content and HTML elements. CSS clip-path uses the shape functions polygon(), circle(), ellipse(), inset(), and path() directly in the style declaration. Both produce a hard binary mask; the difference is verbosity and reusability — SVG clips can be defined once and referenced across many elements.

Content overflow still triggers scrolling even when clipped. A common surprise: setting clip-path: circle(50%) on a tall element does not stop the element from contributing to the document scroll height. The visible region shrinks, but the box layout dimensions stay the full element size. If you need to actually constrain the layout box, combine clip-path with overflow: hidden and matching dimensions, or wrap the clipped element in a container that sizes to the visible portion.

Clipped content remains keyboard-focusable and screen-reader-accessible. Clip-path is a purely visual transformation. The underlying DOM is untouched, so any interactive element you happen to clip away — a button, a link, a form field — is still focusable via the Tab key and still announced by assistive technology. This is rarely the developer's intent. If you clip out a region containing interactive content, use the inert attribute or aria-hidden="true" plus tabindex="-1" on the clipped subtree so the accessibility tree reflects the visual presentation.

Behind the Scenes

CSS Masking Module Level 1: The Spec That Standardized Clip-Path

The modern CSS clip-path property is defined by the CSS Masking Module Level 1, which reached W3C Candidate Recommendation status in 2014 and remains the authoritative spec for both clip-path and mask-image. Before this module, the only way to clip an HTML element was the old clip property (deprecated), which accepted a single rectangular region in absolute pixel coordinates and worked only on absolutely-positioned elements. The Masking module reframed clipping as a shape-driven operation, decoupled it from positioning constraints, and introduced the four basic shape functions still in use today.

SVG Clip-Path: The Original Implementation

Before CSS clip-path existed, the SVG specification — which has had clip-path since SVG 1.0 in 2001 — was the only standardized way to do shape-based clipping on the web. CSS borrowed the syntax model: a <clipPath> element wraps shape primitives, and references resolve via URL. The CSS function form (e.g., polygon(...)) is a notational convenience that compiles down to the same compositor operation under the hood. This shared lineage is why clip-path: url(#id) referencing an SVG-defined clip works seamlessly on HTML elements — the rendering pipeline is unified.

The path() Function and Vector-Based Clipping

The path() function arrived in Chromium 88, Firefox 97, and Safari 13.1, bringing the full expressive power of SVG path syntax into CSS. You pass an SVG path string ("M 0,100 Q 50,0 100,100 Z") and the browser uses it as the clip region. This unlocks curves and bezier control points without needing to approximate them with hundreds of polygon vertices. The coordinate system is the element's own pixel space (not percentages), which means path()-based clips are typically authored alongside known element dimensions or generated programmatically.

CSS Houdini Paint API as an Alternative Path

For dynamic clip-path generation that responds to element size, scroll position, or user interaction, the CSS Painting API (part of CSS Houdini) lets you register a custom paint worklet that draws directly into the element's background or mask layer. This is overkill for static shapes but useful for procedurally generated masks — animated noise patterns, generative scribble masks, or shapes that depend on element dimensions. Houdini paint worklets ship in Chromium-family browsers and ship behind a flag in Firefox; Safari has not implemented them, so this remains a progressive-enhancement option rather than a baseline tool.

Comparison: This Tool vs. Clippy, CSS Generator, and SVGOMG

Several established tools cover the same problem space from different angles. The table below positions this generator against the three most commonly cited alternatives.

The practical takeaway: reach for Clippy when you want to browse a large preset gallery for inspiration; reach for this tool when you want fast vertex-drag refinement plus circle, ellipse, and inset coverage in one place; reach for SVGOMG when your clip is a curve and you need an optimized SVG path string to feed into clip-path: path('...'). The three workflows complement each other more than they compete.