Tools Blog

CSS Clip-Path Maker

Drag points on the canvas to shape your clip-path. Choose presets, switch modes, copy CSS instantly.

polygon / circle / ellipseLive preview9 presets

① Choose a preset or drag the handles ② Switch between polygon, circle and ellipse ③ Copy the CSS

Shape presets
Mode
Double-click a point to remove itClick on an edge to add a point
CSS Output
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

What is CSS clip-path?

The CSS clip-path property creates a clipping region that controls which part of an element is visible. Using polygon(), you define a series of coordinate pairs (in percentages) that form a closed shape — the browser renders only the area inside that polygon. circle() and ellipse() let you clip to circular or oval regions. clip-path is fully hardware-accelerated and can be animated with CSS transitions or JavaScript, enabling dramatic reveal animations and creative section dividers. Combine it with transition: clip-path 0.5s ease for smooth shape morphing.

Frequently Asked Questions

clip-path is a CSS property that restricts the visible area of an element to a defined shape. Only pixels inside the clipping region are rendered; the rest becomes transparent. It is used for creative section cuts, image masks, shape reveals, and animated transitions.
Each pair of values in polygon() is an (x%, y%) coordinate relative to the element's bounding box. (0% 0%) is the top-left corner, (100% 100%) is the bottom-right. You can use any number of points to define complex polygons. Intermediate values give you precise control over every vertex.
polygon() accepts any number of coordinate pairs and creates straight-edged shapes. circle(r at cx cy) creates a circular clip with radius r centred at cx/cy. ellipse(rx ry at cx cy) creates an oval clip. All three accept percentage values relative to the element's dimensions.
clip-path can be transitioned between two polygon() values with the same number of points: .el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. The browser interpolates each coordinate pair. Mismatched point counts cannot be transitioned smoothly.
clip-path with polygon(), circle() and ellipse() is fully supported in Chrome, Edge, Firefox, and Safari without any vendor prefix. Global support exceeds 97%. The path() function (SVG paths) has broader support since 2023. Only very old browsers (IE 11) require the -webkit- prefix for basic shapes.
Common uses include: diagonal section dividers replacing SVG backgrounds, image galleries with hexagonal or diamond masks, animated hero reveals where content "slides in" through a polygon, video overlays shaped like a device mockup, and interactive map regions. It replaces many SVG-only solutions with pure CSS.
CSS clip-path applies directly to HTML elements using simple shape functions and is easy to animate. SVG <clipPath> is defined in SVG markup and referenced via clip-path: url(#id). SVG clipPath supports complex paths, text as masks, and use across multiple elements, but is more verbose. CSS clip-path is preferred for simple shapes; SVG for complex or reusable masks.
Related Articles
CSS 14 min read
CSS Gradients: The Complete Guide from Linear to Conic
Master all three CSS gradient types — linear, radial, and conic — with advanced color stops, angles, hints, and real patterns like striped backgrounds, gradient text, and mesh gradients.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →