CSS Clip Path Generator — Drag-Edit Polygon Shapes

Guide

About Clip Path Generator

Drag polygon points to draw any shape — every move updates the CSS <code>clip-path: polygon(...)</code> live. Presets cover triangle, rhombus, parallelogram, message bubble, and star. Apply to any element to crop it to the shape — useful for hero cuts, decorative banners, and section transitions.

What clip-path enables

The CSS property that cuts an element into any shape. Before clip-path, getting non-rectangular shapes meant SVG masks, transparent PNGs, or hacky absolute-positioned overlays. Now it is one CSS line.

Shape primitives

Shape	Syntax
Polygon	`polygon(0 0, 100% 0, 100% 100%, 0 100%)`
Circle	`circle(50% at 50% 50%)`
Ellipse	`ellipse(40% 30% at 50% 50%)`
Inset	`inset(10px 20px 30px 40px round 10px)`
SVG path	`path("M 10 10 L 90 10 L 50 90 z")`

Common workflows

Diagonal hero edge. polygon(0 0, 100% 0, 100% 80%, 0 100%) — bottom edge slants. Looks bold without an image.

Speech bubble. Polygon with a notch at the bottom. The shape makes the role obvious.

Star decorative element. 10-point polygon — alternate inner and outer radius. Trickier by hand, easy with the visual builder.

Decorative section break. Two stacked sections with opposite-direction clip-paths create an interlocking transition.

Image reveal animation. Animate clip-path: inset(0 100% 0 0) to inset(0 0 0 0) for a left-to-right reveal.

Why visual editing wins

Clip-path coordinates are unintuitive — (0 0, 100% 0, 100% 90%, 0 100%) does not communicate “diagonal cut at bottom-left” without rendering. Drag-and-edit gives instant visual feedback; once the shape is right, copy the values to your CSS.

Performance note

Clip-path can trigger paint on every frame if animated. For 60fps animations, prefer animating elements that compose (transform, opacity) over clip-path. For one-off cuts on static elements, performance is a non-issue.

Frequently asked questions

What can clip-path do?

Crop an element to any shape — circle, ellipse, polygon, inset rectangle, or an SVG path. The cropped area outside the shape becomes click-through transparent. Common for diagonal hero cuts, decorative section breaks, and decorative crops.

How do I make a diagonal hero?

clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%). Cuts the bottom-left corner. Combine with a colored background and you get a slanted hero edge.

Browser support?

Excellent — every modern browser. The clip-path property has been stable since 2017.

Can I animate it?

Yes — between two same-shape paths. polygon with the same number of points, or circle()/ellipse() with parameter changes. Cross-shape morphs need different techniques.

What is the inset shape?

inset(top right bottom left round corner). Clips to a rectangle inside the element. Useful for animated "drawer opens" effects.

Does it work on text?

Apply to a parent with the text inside; the text is clipped along with the element. For text-only clipping (e.g. text in a custom shape), use SVG <clipPath> instead.

Related tools

Last updated: 2025-01-15