Free CSS Clip-Path Generator

How It Works

1. Choose a shape type: select from polygon, circle, ellipse, or inset (rectangle with optional rounded corners).
2. Drag the control points: move the shape handles on the preview to customize the clip region precisely.
3. Copy the CSS: the generated clip-path property value is ready to paste into your stylesheet.

Why Use CSS Clip-Path Generator?

CSS clip-path creates non-rectangular element shapes by masking everything outside a defined clip region. It is used for diagonal section dividers, hexagonal image crops, custom button shapes, creative hover effects, and masked image reveals. Writing clip-path polygon coordinates by hand requires calculating percentage values for each vertex, tedious and hard to visualize. This interactive generator lets you drag points visually and get the exact CSS values instantly.

Features

• Polygon editor: add, move, and remove vertices to create any polygon shape.
• Built-in presets: diagonal, chevron, hexagon, star, triangle, and other common shapes.
• Circle and ellipse modes: visual controls for clipping to circular and elliptical shapes.
• Inset mode: create rectangular clips with individual border-radius on each corner.
• Outside clip preview: see the masked area highlighted so you know exactly what will be hidden.

Frequently Asked Questions

Does clip-path affect clickable areas?

Yes. By default, pointer events only register within the clip region, the clipped-away area is both invisible and unclickable. To make the full element clickable while only visually clipping it, use pointer-events: all on the element or a transparent overlay.

Can I animate clip-path?

Yes, clip-path can be transitioned and animated with CSS. Animate between two polygon shapes with the same number of points for a smooth morphing effect. Shapes with different point counts will snap rather than interpolate.

Is clip-path supported in all browsers?

clip-path is supported in all modern browsers. For SVG-based shapes via the url(#id) syntax, browser support is broader. The basic polygon, circle, ellipse, and inset values work universally in Chrome, Firefox, Safari, and Edge.

What CSS clip-path actually does

The CSS clip-path property masks an element to a chosen shape: anything inside the shape is visible, everything outside becomes transparent. The element's layout box is unchanged (it still occupies the same rectangle for purposes of margin collapse, flow, and sibling positioning), but only the pixels inside the clip region are drawn. This makes clip-path different from cropping (which permanently changes the image) and different from positioning (which moves things around): clip-path is a display-time mask applied right before pixels hit the screen.

There are four basic shape functions: polygon() (a list of vertices as percent or pixel coordinates), circle() (radius plus a center), ellipse() (two radii plus a center), and inset() (a rectangle measured from each edge, optionally with rounded corners). For shapes too complex for these four (irregular curves, stars with concave indents, calligraphic outlines), clip-path also accepts an SVG path via path() or a reference to an SVG <clipPath> element via url(#id). The browser draws the element, then composites it through the alpha mask defined by your shape.

clip-path matters for modern web design because it enables shapes that would have required image editors a decade ago. A diagonal section divider, a hexagonal avatar grid, a chevron banner, a star-shaped photo: all now possible in pure CSS, scalable to any size, animatable on hover, and accessible because the underlying element is still HTML, not a rasterized image. The trade-off is verbosity: writing polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) by hand for a simple diamond is doable, but a 12-vertex star or a custom logo cutout is impractical without a visual editor. That is where this generator fits.

How this tool works under the hood

The preview is a div with your chosen clip-path applied as inline CSS, updated on every drag of a control handle. The handles are absolutely positioned circles overlaid on top of the preview at the percent coordinates of each vertex. When you drag a handle, JavaScript captures the mousemove (or touchmove) event, converts the pixel position to a percent of the preview area, updates that vertex in the in-memory polygon, and re-applies the clip-path string. Real-time rendering means you see the shape change as you drag, not after.

The generated CSS is constructed by joining the vertices into a polygon string: polygon(x1% y1%, x2% y2%, ...) for polygon mode, or circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) for the simpler shape types. Percent values rather than pixel values are used because percentages scale with the element automatically: a polygon that looks correct at 300x200 also looks correct at 600x400 with no change to the CSS. The code box updates on every interaction, and the Copy CSS button writes the current value to your clipboard.

Nothing leaves your browser. The preview, the shape calculations, the CSS generation, and the clipboard copy are all client-side JavaScript. No network request is made; no image is uploaded; no analytics on your shape choices. The tool has no backend at all beyond the static HTML and JavaScript served once on first load. Open the browser's network tab during use and you will see zero requests after the initial page load. The CSS you generate is yours to paste into any stylesheet.

Brief history of CSS clipping

• SVG clipPath, 2001. The SVG 1.0 specification (W3C Recommendation, September 2001) introduces <clipPath>, allowing any SVG element to be masked by another shape. SVG clipping handles complex paths but requires inline SVG markup, limiting reuse in plain HTML pages without SVG fluency.
• CSS clip property, 1998 to 2010s. The original CSS clip property (CSS 2 spec, 1998) only supported rect(), a four-value rectangle clip on absolutely-positioned elements. Limited and deprecated by 2014, but still seen in legacy "screen reader only" CSS patterns where the visible content is clipped to 1x1 pixel for accessibility.
• CSS Masking Module Level 1, 2014. The W3C publishes the CSS Masking Module Level 1 specification (April 2014), introducing the modern clip-path property with polygon, circle, ellipse, inset, and SVG-path support. Chrome 24 (January 2013) and Safari 7 (June 2013) ship the basic shapes ahead of the formal spec; Firefox follows in version 54 (June 2017).
• Adobe brutalist web design wave, 2015 to 2017. Hero sections with diagonal cuts, angled banner dividers, and hexagonal team-photo grids become a design trend, driven by tools like Webflow and design articles on CSS-Tricks. Awwwards-style portfolios prominently feature clip-path tricks, and the property goes from "obscure CSS curiosity" to "expected modern technique."
• Internet Explorer drops dead, 2022. Microsoft retires Internet Explorer on June 15, 2022, ending the last meaningful browser barrier to modern CSS features including clip-path. By 2023, "supports clip-path?" stops being a serious cross-browser concern, and the property becomes a default tool in CSS-only design.
• CSS shape() function, 2024 and beyond. The CSS Shapes Module continues evolving with proposals like shape() (a more flexible alternative to path() using CSS-friendly syntax instead of SVG path strings), enabling complex shapes without the SVG context-switch. Browser support is rolling out through 2025 and 2026.

Real-world workflows

• Hero section diagonal cuts. The "trapezoid hero" pattern where the bottom edge of a hero section is angled diagonally rather than horizontal is one of the most popular clip-path uses. A simple polygon(0 0, 100% 0, 100% 90%, 0 100%) creates a 10% bottom-left to top-right slant. Add a second section underneath with the inverse slant and you get a "torn paper" or "stacked angles" layout that feels deliberate without needing any images.
• Hexagonal avatar grids. Team pages, contributor lists, or sports rosters often use hexagonal photo crops for a more dynamic alternative to round avatars. A six-vertex polygon clip-path creates the hexagon; CSS grid arranges the staggered honeycomb layout. Compared to clipping in Photoshop, the photos remain original and unmodified: change the hex orientation or swap to circles with a single CSS edit.
• Hover image reveal effects. Animating clip-path on hover creates "image reveals" where a clipped portion expands smoothly. Common patterns: an image starts as a tiny circle and expands to full coverage on hover, or a polygon starts as a thin slash and grows into a full rectangle. CSS transition on clip-path interpolates between two polygons with the same vertex count smoothly, producing 60fps animations without JavaScript.
• Custom button shapes. Game UI, futuristic interfaces, and creative portfolios often use non-rectangular buttons (arrow shapes, hexagons, parallelograms). clip-path masks a standard button element to the chosen shape, keeping the underlying button accessible (still focusable, still clickable by keyboard, still announceable by screen readers) while presenting a custom visual.
• Decorative section dividers. Wave dividers, chevron dividers, and "torn page" dividers between page sections used to require background SVG images or images per section. clip-path produces them in pure CSS using either an inset with rounded corners or a polygon following the desired wave. The dividers scale and respond to layout changes automatically.
• Creative photo galleries. Photo gallery layouts using uniform rectangular thumbnails feel generic; clipping each thumbnail to a slightly different polygon shape produces a hand-cut collage feeling without manual masking each image. A small set of 3 to 5 polygon variants cycled through the grid creates visual rhythm while staying performant (the same shape is just transform-applied to different image sources).

Common pitfalls and what they mean

• clip-path does not change layout. A common surprise: clipping an element to a smaller shape does not reduce the space it takes in the document flow. The element still occupies its full layout box; clip-path only changes what is drawn. To get an element that physically takes less space, you need to also resize it. If you want clipped content to actually crop, use overflow: hidden on a wrapper, or use CSS mask with a smaller layout box.
• Aspect-ratio mismatch breaks percent coordinates. Polygon coordinates expressed as percentages scale uniformly with the element. A diamond shape polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) stays a diamond at any size, but it becomes a wider or taller rhombus if the element's aspect ratio changes. For shapes that need to remain visually consistent across aspect ratios, use pixel values or min(50vw, 50vh) calculations, or constrain the element's aspect-ratio with the aspect-ratio CSS property.
• Clipped regions are not clickable. Pointer events only register where the element is visible after clipping. A button clipped to a triangle is only clickable on the triangle, not on the invisible rectangle space it occupies. This is usually desired (no accidental clicks on empty space), but can be confusing when multiple clipped buttons overlap or when interactive content extends visually outside the clip region.
• Animating many clipped elements is expensive. clip-path triggers compositing on each animation frame, which can drop frame rates if applied to many elements simultaneously or on large elements (full-screen hero sections). For 60fps animations, limit the number of concurrently-animating clipped elements, prefer simpler shapes (4- to 6-vertex polygons over 20-vertex), and consider using CSS will-change: clip-path on elements you plan to animate to hint the browser to GPU-accelerate them.
• Polygons need matching vertex counts to morph. Animating clip-path between two polygon shapes works only if both polygons have the same number of vertices. Going from a triangle (3 points) to a square (4 points) snaps instantly rather than morphing smoothly. For smooth morphing between shapes with different visual complexity, define both polygons with the same number of points, placing extras at coordinates that "hide" them on one of the shapes (e.g., two points on top of each other).
• Safari requires the -webkit- prefix for SVG path syntax. The basic shapes (polygon, circle, ellipse, inset) work unprefixed across all modern browsers. But Safari still requires the -webkit-clip-path prefix when using the path() function or referencing url(#id) SVG clipPaths. For cross-browser compatibility, declare both -webkit-clip-path and clip-path with the same value for SVG-path-based clipping. Auto-prefixers (Autoprefixer, PostCSS) handle this automatically in modern build setups.

Privacy: everything runs in your browser

CSS generator tools traditionally fall into two camps: simple HTML pages with client-side JavaScript (private, fast, no account needed) and full-featured editors with cloud-saved projects (collaborative, but every shape edit gets logged on someone else's server). This tool is firmly in the first camp. The polygon coordinates you drag, the colors you pick, the CSS you copy: all stay in your browser session, never sent anywhere. Refresh the page and the state is gone unless you copied the CSS first.

The privacy implication matters mostly for proprietary work. A design agency prototyping a custom button shape for a confidential brand redesign, an indie developer working on an unannounced game UI, an enterprise team designing layouts for a product still under NDA: any context where the shape itself or its iteration history could leak information about ongoing work. With this tool, none of that risk exists because none of it is captured. Open the browser's Network tab while dragging handles and you will see zero outbound requests.

When another tool is the right pick

• SVG editors for complex paths. For irregular curves, calligraphic shapes, or anything beyond the basic shape functions, drawing the shape in Figma, Inkscape, or Adobe Illustrator and exporting as an SVG path is more practical than hand-coding clip-path coordinates. Then use clip-path: path('M...') or reference the SVG by ID. SVG editors provide bezier handles and precision; clip-path generators don't.
• CSS mask for alpha blending and gradients. clip-path produces a binary alpha (fully visible or fully clipped). For soft-edged shapes (gradient fades, anti-aliased curves, partial transparency), CSS mask or mask-image handles full alpha gradients. mask supports a mask image (any PNG, SVG, or gradient) where black pixels hide and white pixels show, with grays giving partial opacity. clip-path can't do that.
• Image processing for permanent crops. If you want the final image file itself cropped to a shape (smaller file size, no clip-path overhead, no risk of unclipped fallback), do the crop in an image editor or our Image Compressor tool. clip-path is for display-time masking on HTML elements; if the target is a static image asset, crop the file directly.
• Figma or Sketch for design mockups. While prototyping a layout, Figma's vector tools handle complex shape exploration faster than dragging clip-path handles. Use the design tool to find the shape you want, then translate the final shape into clip-path CSS for production. The design tool also handles iterations, undo history, and team comments better than a real-time CSS generator.

Other frequently asked questions

Can I use percentages or pixels for vertex coordinates?

Both work. Percentages scale with the element's box, so a polygon defined in percentages keeps its proportional shape when the element resizes. Pixels are absolute, so a polygon with pixel coordinates keeps the same size regardless of the element. Use percentages for shapes that should resize with the layout (most cases) and pixels for shapes that need exact pixel positions (e.g., aligning to a specific design element). You can also mix: polygon(50% 10px, 100% 50%, ...) is valid.

Will clip-path affect SEO or screen readers?

No. clip-path is a visual-only property. The underlying HTML is fully accessible: text inside a clipped element is still indexed by search engines, still announced by screen readers, still selectable by keyboard navigation. Use clip-path for visual styling; do not use it as a way to hide content semantically (that requires display: none or aria-hidden attributes). Visually clipped content remains present in the accessibility tree.

How do I make a clip-path responsive?

Use percentages instead of pixels, and check the result at different breakpoints. For shapes that need different proportions on mobile versus desktop, use CSS media queries to swap the clip-path value: declare a different clip-path inside @media (max-width: 768px) for the mobile shape. For complex responsive needs (e.g., a polygon that becomes a circle on mobile), consider using JavaScript to recompute the clip-path based on window size, though pure-CSS approaches handle most cases.

Can clip-path be applied to videos and iframes?

Yes. clip-path works on any HTML element, including <video> and <iframe>. The mask applies at the element level, so a video clipped to a hexagon plays back inside that hexagon. The video controls (when shown) are also clipped, which can hide play/pause buttons inadvertently; wrap the video in a container element if you need the controls visible outside the clipped area.

What is the maximum number of polygon vertices?

There is no formal limit specified by the CSS standard. Practically, browsers handle polygons with hundreds of vertices without rendering errors, but performance degrades with vertex count, especially for animated clip-paths. Aim for 3 to 12 vertices for most decorative shapes; if you need more complexity, switch to an SVG path() for cleaner authoring and similar performance characteristics. Beyond 50 vertices, clip-path becomes harder to maintain by hand and an SVG-editor workflow makes more sense.

Can I clip text instead of just images and boxes?

Yes. clip-path works on text elements too, masking them just like any other element. The visual effect is "text peeking through a shape." For more sophisticated text-shape effects (e.g., using a text outline as the clipping mask for an image), combine clip-path with background-clip: text, which uses the text shape itself as the clip region for the element's background. Common pattern: large text with a gradient background visible only inside the text shapes.