Frontend / CSS Tools

CSS Clip Path Generator

Build a CSS clip-path shape visually - common practical shapes with editable points - with a live preview.

Choose a starting shape and adjust its points - the preview updates live and the clip-path CSS is ready to copy.

Shape

More Frontend / CSS Tools

CSS Animation Generator CSS Filter Generator CSS Transform Generator CSS Text Shadow Generator CSS Grid Generator CSS Triangle Generator CSS Flexbox Generator CSS Glassmorphism Generator

Clip-path visually crops an element - the underlying content and layout size are unchanged, only what's visible changes.

What Does clip-path Do?

The clip-path property crops an element to a specified shape - only the part of the element inside that shape remains visible, everything outside it is hidden.

Why Use This Tool?

Hand-writing polygon() coordinate lists is tedious and hard to visualize - adjusting points with a live preview is far more direct than guessing percentages.

How to Use It

Choose a starting shape (triangle, polygon, circle, or ellipse).
Adjust the shape's points or radius.
Copy the generated clip-path CSS value.

Limitations

This covers the common basic shape functions (polygon(), circle(), ellipse(), inset()) - clipping to an SVG path() or a URL reference isn't generated here.

Examples

/* Triangle */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* Slanted section edge */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

/* Circular avatar */
clip-path: circle(50% at 50% 50%);

/* Rounded inset crop */
clip-path: inset(10px 20px round 12px);

Popular Uses

Diagonal or angled section dividers on landing pages.
Hexagon, circle or blob-shaped image frames.
Reveal animations - transitioning clip-path between two shapes with the same number of points animates smoothly.

Things to Know

Clicks only register inside the visible shape.
Box shadows are clipped too - use filter: drop-shadow() on a parent element instead.
Polygon points are listed clockwise from the top-left; percentages are relative to the element's size.
For simple rounded corners, border-radius is easier and more efficient.

Combine with the CSS Transform Generator or CSS Animation Generator. For triangles used as arrows, the CSS Triangle Generator is another option.