CSS Clip-Path Maker: Plot Custom Polygon Masks Visually

Click to add vertices, drag to reposition, double-click to delete. Get the live clip-path: polygon() CSS code as you build.

Controls and Presets
Shape Presets
Background Context
Canvas Proportions
Edit Polygon
0 vertices plotted
Interaction Guide
Click canvas to add a vertex
Drag a node to reposition it
Double-click a node to delete it
Interactive Clipping Canvas
+ Click anywhere to plot your first vertex
Compiled CSS Output
Plot at least 3 vertices to generate CSS output...
Copied to clipboard!
Vertex Coordinates
Key Terms Explained
Clip-Path
A CSS property that hides parts of an element outside a defined geometric region, creating a custom visible area without removing the element from the document flow.
Polygon() Function
A CSS shape value that defines a clipping region as a multi-sided polygon using a list of X and Y coordinate pairs. Each pair marks one vertex of the boundary.
Coordinate System
The 2D reference grid used to locate positions inside an element. The origin (0% 0%) is the top-left corner of the bounding box; (100% 100%) is the bottom-right.
Vertex / Node
A single corner point of a polygon. Each vertex is defined by one X and Y value. The browser connects all vertices in sequence to form the clipping boundary.
CSS Masking
The broad term for CSS techniques that control which parts of an element are visible. The two primary approaches in modern CSS are clip-path and mask-image.
Bounding Box
The invisible rectangle that wraps an HTML element. CSS clip-path percentage coordinates are always relative to this box, not the page or the viewport.
Aspect Ratio
The proportional width-to-height relationship of a container. Previewing your polygon mask at the correct aspect ratio ensures the shape scales correctly in production.
SVG vs CSS Clipping
CSS clip-path is quicker to author and fully responsive using percentages. SVG clipPath supports curved Bezier edges and can be reused across multiple elements via an id reference.

The Complete Guide to CSS Clip-Path Polygon Masking

CSS clip-path lets you crop any HTML element into a custom polygon shape without touching an image editor or writing a separate SVG file. This guide covers how the percentage coordinate system works, why responsive units matter, how to animate polygon shapes on hover, and when to use SVG clipping instead.

How to Use This Tool

Start by clicking a preset button to load a starting shape, or click directly on the canvas to place your first vertex. Every additional click adds a new corner to your polygon. Once three or more vertices are plotted, the live preview splits the canvas into a dimmed unmasked area and a fully visible masked area so you can see exactly what your clip-path will look like. Drag any yellow node to fine-tune its position. Double-click a node to remove it. Use the ratio toggles to match your target layout (square, widescreen, or photo format), and upload your own image to preview the mask over real content.

Understanding the CSS Coordinate Grid

Every polygon coordinate is expressed as a percentage of the element's own bounding box width and height. The origin, 0% 0%, sits at the top-left corner. The point 100% 100% is the bottom-right corner. A vertex at 50% 0% is always the exact horizontal center of the top edge, regardless of whether the element is 200 pixels wide or 2000 pixels wide. This makes percentage-based clip-paths inherently fluid and responsive. Pixel values do not share this property - a shape authored for a 400px card breaks visually on a 200px thumbnail or a full-width hero image.

Floating-Point Precision in the Polygon Output

Dividing raw pixel positions by canvas dimensions often produces long floating-point decimals, such as 33.333333333336%. This tool clamps every output coordinate to two decimal places (e.g., 33.33%). Two decimal places provides sub-pixel precision on any realistic element size while keeping the generated CSS clean and readable in your stylesheet.

Animating CSS Clip-Path Polygons on Hover

Browsers can tween between two polygon() values as long as both shapes have the same number of vertices. The browser interpolates each coordinate pair independently on every animation frame. To create a hover reveal, apply a CSS transition on the base state and define a second polygon() value in a :hover rule. The vertex count must match exactly between states. If your resting shape has six points, your hover shape must also have six points, even if two of them are collapsed to the same position to simulate a simpler outline.

SVG clipPath vs CSS clip-path

CSS clip-path with polygon() is the right choice for most layout masking work. It lives entirely in your stylesheet, needs no extra markup, and supports smooth CSS transitions and animations. SVG clipPath is a better fit when you need curved edges (Bezier curves are natively supported in SVG path data but not in the polygon() function), when you want to define one mask and apply it to multiple elements by referencing a shared id, or when you need to clip SVG elements themselves. For curved clip shapes in pure CSS, use the path() function value rather than polygon().

Browser Support and the Webkit Prefix

The clip-path property with polygon() is supported in every modern browser. The -webkit-clip-path prefix targets Safari versions prior to 13.1 (released 2019). This tool outputs both declarations for maximum coverage across older devices. If you are targeting only evergreen browsers you can safely omit the -webkit- line. On mobile, support is complete across Chrome for Android, Safari for iOS, and Samsung Internet.

Frequently Asked Questions

What is the CSS clip-path property? +
The CSS clip-path property defines a clipping region that determines which parts of an element are visible. Everything inside the clipping shape is shown at full opacity; everything outside is hidden. It works on any HTML element including images, divs, and videos, and requires no image editing software or separate mask files.
How does the polygon() function calculate coordinates? +
The polygon() function takes a list of vertex coordinate pairs, each written as an X and Y value separated by a space. The coordinate system starts at the top-left corner of the element's bounding box (0% 0%) and ends at the bottom-right (100% 100%). Each pair defines one corner of the polygon, and the browser draws straight lines between consecutive pairs to form the clipping boundary.
Why should I use percentages instead of pixels for my clip-path? +
Percentage values make your clip-path fully responsive. When you write clip-path: polygon(50% 0%, 100% 100%, 0% 100%), the triangle scales perfectly with the element regardless of its rendered size. Pixel values are fixed, so a shape designed for a 400px-wide image will look distorted on a 200px thumbnail or a full-bleed hero section.
Is CSS clip-path fully supported on mobile browsers? +
Yes. The clip-path property with polygon() is supported in all modern mobile and desktop browsers including Chrome, Safari, Firefox, and Edge. Global support is above 97% as of 2025. The -webkit-clip-path vendor prefix is still useful for older Safari versions prior to 13.1, which is why this tool outputs both declarations.
Can I animate a CSS clip-path polygon on hover? +
Yes, as long as both the start and end polygon() functions have the same number of vertices. Browsers interpolate the coordinate values frame by frame to produce smooth transitions. Add a CSS transition property such as transition: clip-path 0.4s ease to the element, then define a different polygon() value in a :hover or :focus selector. The vertex count must match exactly, or the animation will jump instantly rather than tween.
This tool performs all coordinate calculations locally in your browser. No image data, vertex coordinates, or session information is ever sent to a server. Uploaded images are loaded using the browser-native URL.createObjectURL() API and are never transmitted externally. Your work stays entirely on your device.