CSS clip-path: Create Custom Shapes for the Web

What Is clip-path?

The CSS clip-path property defines a clipping region that determines which parts of an element are visible. Everything outside the region is hidden. It is like using scissors to cut an element into any shape you want — circles, triangles, hexagons, stars, or completely custom shapes.

Unlike border-radius (which only creates rounded rectangles) or overflow: hidden (which only clips to the bounding box), clip-path can create arbitrary shapes. This makes it powerful for creative layouts, image masks, section dividers, and hover effects.

The property clips the entire element, including backgrounds, borders, shadows, and child content. Box shadows will not appear outside the clipped area — if you need a shadow on a clipped shape, wrap the element and apply the shadow to the wrapper.

Basic Shapes

Circle

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

Creates a circle with a radius of 50% of the element's size, centered. Adjust the radius for smaller or larger circles, and change the position to offset the center.

Ellipse

clip-path: ellipse(40% 60% at 50% 50%);

An oval shape with separate horizontal (40%) and vertical (60%) radii. Useful for wide banner crops or vertical portrait frames.

Inset

clip-path: inset(10% 20% 10% 20% round 15px);

Creates a rectangle inset from each edge by the specified amounts. The round keyword adds border-radius. This is useful for creating padded, rounded clip regions.

Polygon

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

Defines a shape using a series of x,y coordinate pairs. This triangle example has three points: top center, bottom right, bottom left. Polygons can have any number of points, enabling complex shapes like hexagons, arrows, stars, and speech bubbles.

Common Polygon Shapes

• Triangle: polygon(50% 0%, 0% 100%, 100% 100%)
• Pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
• Hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
• Arrow right: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
• Cross: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%)

These percentage-based coordinates scale with the element. A hexagon clip-path works on a 100px square and a 600px hero image equally well.

SVG Path Clipping

For shapes that cannot be expressed as polygons — smooth curves, organic blobs, custom illustrations — you can reference an SVG <clipPath> element:

<svg width="0" height="0">
<defs>
<clipPath id="blob" clipPathUnits="objectBoundingBox">
<path d="M0.5,0 C0.8,0.1 1,0.4 0.9,0.7 C0.8,1 0.3,1 0.1,0.8 C-0.1,0.5 0.2,-0.1 0.5,0 Z"/>
</clipPath>
</defs>
</svg>

Then reference it in CSS: clip-path: url(#blob);

The clipPathUnits="objectBoundingBox" attribute maps coordinates to a 0-1 range relative to the element, making the clip-path responsive.

Animation and Transitions

Clip-path supports CSS transitions and animations, enabling shape-morphing effects:

.card { clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s ease; }
.card.visible { clip-path: circle(100% at 50% 50%); }

This creates a circular reveal animation — the element expands from a point to full visibility. The transition works because both states use the same shape function (circle). Animating between different functions (e.g., circle to polygon) does not work — the number and type of points must match.

For polygon animations, keep the same number of vertices in both states. Add invisible vertices at the same position as other vertices to pad the point count if needed. Polygon transitions create morphing effects that look like the shape is transforming.

Generate clip-path Visually

Calculating polygon coordinates by hand is tedious and error-prone. Our Clip Path Generator lets you draw shapes visually — drag points, adjust curves, preview the result on your own image — and export the CSS instantly. No math required.