CSS clip-path Generator

The Complete Guide to CSS clip-path

The CSS clip-path property lets you clip an element to any shape — triangles, hexagons, stars, arrows, speech bubbles, and freeform polygons — without images, masks, or SVG wrappers. The visible region is defined by a basic shape function, and everything outside that region simply isn't painted (and isn't clickable). Because it's pure CSS, it scales crisply at any resolution, animates on the GPU, and adds zero network requests.

The Four Shape Functions

• polygon() — a list of x y coordinate pairs that form a closed shape, e.g. polygon(50% 0%, 0% 100%, 100% 100%) for a triangle. This is the most flexible function and the one this generator lets you edit by dragging.
• circle() — circle(radius at cx cy), e.g. circle(50% at 50% 50%). Perfect for round avatars and spotlight reveals.
• ellipse() — ellipse(rx ry at cx cy) for oval clips with independent horizontal and vertical radii.
• inset() — inset(top right bottom left round radius) clips a rectangle in from each edge, with optional rounded corners. Great for reveal animations and rounded crops.

How polygon() Coordinates Work

Each point is written as a horizontal value followed by a vertical value. 0% 0% is the top-left corner, 100% 0% is the top-right, and 100% 100% is the bottom-right. Points are connected in the order you list them, and the shape closes automatically from the last point back to the first. Using percentages keeps the shape responsive — it stretches with the element. You can also mix in pixel values for fixed-size notches.

Practical Uses

• Angled section dividers — slice the top or bottom of a hero band into a diagonal with a four-point polygon.
• Hexagon & diamond avatars — clip profile images into geometric tiles for team grids.
• Reveal animations — transition clip-path (e.g. from inset(0 100% 0 0) to inset(0)) to wipe content into view.
• Speech bubbles & badges — build a message tail or ribbon notch entirely in CSS.
• Hover effects — animate between two polygons to morph a button or card on interaction.

Browser Support & Tips

All modern browsers support clip-path with basic shapes. For maximum compatibility this generator outputs the standard property alongside the -webkit-clip-path prefix. Animations between two polygon() values only interpolate smoothly when both have the same number of points — a common gotcha. Remember that clipping affects pointer events too: clicks on the clipped-away area pass through to elements beneath.