UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Clip Path Generator

Explore polygon, circle, ellipse, and inset clip-path presets with live previews.

About Clip Path Generator

The clip-path property can turn any HTML element into a triangle, pentagon, star, or diagonal hero section — but specifying polygon coordinates by hand as percentages requires careful calculation and constant browser checks. The Clip Path Generator provides a drag-based polygon editor where you move vertices in a live grid and see the clipped element update in real time. Switch to circle or ellipse mode for centered cutouts with adjustable radii, or use inset mode to crop edges with optional rounded corners. A shape library offers presets for common needs — arrows, chevrons, parallelograms, and diagonal crops — so you start from a working shape rather than zero. Outputs clean clip-path declarations using percentage units so your shapes scale responsively with the element.

Why use Clip Path Generator

Polygon Editor

Drag vertices directly in a visual grid rather than writing comma-separated percentages by hand. Add and remove points to build shapes of any complexity, and watch the clipped preview update with every drag without touching the keyboard.

Shape Library

Presets for triangles, pentagons, hexagons, arrows, stars, and diagonal crops load a complete polygon in one click. Use them as starting points to modify or ship as-is for common UI patterns like section dividers and badge shapes.

Circle & Ellipse

Switch to circle or ellipse mode for centered cutouts with a visual radius handle and drag-to-reposition center point. The output uses the clean circle() and ellipse() syntax rather than an approximated polygon.

Inset Cropping

The inset type lets you crop from all four edges independently with an optional border-radius argument. Useful for creating panels with angled or rounded inset borders that still respond to element sizing.

Animation Friendly

Polygon clip-paths animate between two states when both shapes have the same vertex count. The generator lets you copy two shapes with matching point counts so you can interpolate between them in a CSS transition or @keyframes block.

Browser Support

clip-path with basic shapes has no required vendor prefixes in any current browser. The generator outputs modern syntax and notes the -webkit- prefix only for older Safari versions still in support windows.

How to use Clip Path Generator

Pick a shape type from the tabs: polygon, circle, ellipse, or inset
Select a preset shape from the library or start with a blank polygon
Drag polygon vertices on the grid to reshape the clip boundary
For circle and ellipse, adjust the radius and center position handles
For inset, drag each edge's offset and set corner-radius if needed
Click Copy CSS to capture the clip-path declaration for your stylesheet

When to use Clip Path Generator

When building a hero section with a diagonal bottom edge that cuts across the background color
When creating triangular shape decorations or directional arrows as pure CSS without SVG files
When designing hexagonal image grids for portfolio or team section layouts
When clipping a card or image to a custom polygon for a branded, non-rectangular layout
When animating a shape reveal effect where an element clips in from one polygon to another
When making a badge or label in a chevron or arrow shape for navigation or status indicators

Examples

Pentagon

Input: Polygon preset: 5 vertices at 50/0, 100/38, 82/100, 18/100, 0/38

Output: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Circle from center

Input: Circle mode, radius 40%, center position 50%/50%

Output: clip-path: circle(40% at 50% 50%);

Diagonal hero crop

Input: Polygon: top-left 0/0, top-right 100/0, bottom-right 100/85, bottom-left 0/100

Output: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Tips

Keep the same number of polygon vertices in both states when you plan to animate the shape with a CSS transition or @keyframes
Use percentage units (the default) so the clipped shape scales proportionally as the element resizes — pixel values create a fixed cutout that breaks at different sizes
circle(50%) on a perfectly square element is equivalent to border-radius: 50% but works on non-box rendering contexts like transformed elements
Combine clip-path with a CSS transition on hover for reveal effects — a diagonal slide-in can be achieved by transitioning from clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) to a full rectangle
For complex illustrative shapes, draw them in Figma or Inkscape, export as SVG, extract the path d attribute, and use clip-path: path() with that string

Frequently Asked Questions

What is the difference between clip-path and mask?▾

clip-path defines a shape region and discards everything outside it, using geometric primitives or SVG paths. mask uses a separate image or gradient as an alpha or luminance channel to control visibility. clip-path is simpler and GPU-friendly; mask allows smooth gradual edges and bitmap-defined shapes.

Can I animate clip-path between two polygon shapes?▾

Yes, as long as both polygon shapes have the same number of vertices. CSS interpolates each vertex position separately. If vertex counts differ, the transition jumps rather than interpolates. Always match vertex counts when designing from/to animation pairs.

Why does my polygon need the same number of points to animate?▾

The browser animates clip-path by linearly interpolating each x/y coordinate pair. Without a 1-to-1 mapping of vertices, it has no way to decide which destination point each source point should travel toward, so it cannot interpolate and falls back to a hard swap.

How do I make a star shape with clip-path?▾

A five-pointed star needs ten polygon points alternating between outer radius and inner radius positions. The generator includes a star preset that sets up all ten vertices. Adjust the inner-to-outer radius ratio to control how sharp or stubby the star points appear.

Does clip-path affect click events outside the shape?▾

Pointer events still fire within the original bounding box by default, not just the visible clipped area. To restrict clicks to the visible shape, add pointer-events: none to the parent and pointer-events: auto to the clipped child, or use JavaScript hit-testing.

Can I use SVG paths inside clip-path?▾

Yes. clip-path: path() accepts an SVG path string for complex curves, spirals, and text cutouts that polygon cannot express. Browser support for path() syntax is good in modern browsers but lacks the percentage-based responsive scaling of the shape functions.

How is clip-path different from border-radius?▾

border-radius only rounds rectangle corners with circular or elliptical arcs. clip-path can produce any polygon, diagonal cut, circle, ellipse, or SVG path. For anything more complex than rounded rectangles, clip-path is the right tool.

Why are some browsers showing the unclipped shape?▾

Very old browsers lack clip-path support entirely, while some intermediate versions require the -webkit-clip-path prefix. Ensure you include both webkit-prefixed and unprefixed declarations. Modern Chrome, Firefox, Safari, and Edge all support clip-path without prefixes.

Explore the category

Glossary

Clip Path: A CSS property that defines a clipping region. Only the portion of an element inside the clip path is visible; everything outside is discarded without affecting layout.
Polygon: The clip-path shape function that defines a region by a list of x/y coordinate vertices connected in order. Supports any number of points for triangles, pentagons, stars, and irregular shapes.
Inset: A clip-path shape function that crops an element from its edges inward by specified distances, with optional rounded corners using the round keyword.
Vertex: A single x/y coordinate point in a clip-path polygon. Multiple vertices connected in sequence define the full boundary of the clipped region.
SVG Path: A clip-path value using the path() function with an SVG path string, enabling Bezier curves and complex shapes that geometric primitives cannot express.
Mask: A CSS property that uses an image or gradient as a visibility map. Unlike clip-path, masks support gradual transparency and non-geometric shapes at the cost of more complex syntax.