How to Create CSS Clip Paths: Shapes & Generator Guide

CSS clip-path is the property that lets you cut non-rectangular shapes out of any HTML element. Instead of opening Photoshop to mask an image into a circle or triangle, you write a single CSS rule. A CSS clip path generator takes this further by letting you design shapes visually and export the code instantly — no coordinate math required.

This guide covers every shape type, browser support, practical use cases, and how to use a generator tool to speed up your workflow.

What Is CSS Clip-Path?

The clip-path property defines a clipping region for an element. Anything inside the region stays visible; everything outside is hidden. The element's box model — width, height, margins — remains unchanged. Only the painted area changes.

There are four basic shape functions you can use:

polygon() — connect points to form any straight-edged shape
circle() — define a radius and center point
ellipse() — separate X and Y radii for oval shapes
inset() — inset the element from one or more edges

Here's a visual comparison of the three most common shapes:

Shape Types and Syntax

Polygon

The most flexible shape. You list points as percentage coordinate pairs, and the browser connects them sequentially.

.arrow-shape {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Polygons can have as many points as you need. Triangles, hexagons, stars, arrows — all are polygons with different point counts.

Circle

Takes a radius and a center position. The center uses the at keyword followed by coordinates.

.avatar {
  clip-path: circle(50% at 50% 50%);
}

Ellipse

Like circle, but with independent horizontal and vertical radii. Useful for oval avatars or organic shapes.

.oval {
  clip-path: ellipse(50% 35% at 50% 50%);
}

Inset

Insets the element from its edges. Accepts top, right, bottom, left values and an optional round keyword for rounded corners on the inset shape.

.framed {
  clip-path: inset(10% 10% 10% 10% round 10px);
}

Why Use a CSS Clip Path Generator

Writing polygon coordinates by hand means guessing where 47% 23% lands on your element. You save, refresh, adjust, repeat. A CSS clip path editor eliminates that cycle. You drag points on a live canvas, see the shape update in real time, and copy the generated CSS when it looks right.

The generator handles the math — converting pixel positions to percentages, maintaining point order, and producing clean, production-ready output. For complex polygons with 8 or 10 points, this saves significant time.

Browser Support for Clip-Path Shapes

clip-path with basic shape functions has over 97% global browser support. Chrome, Firefox, Safari, and Edge all support it without vendor prefixes. Mobile browsers are fully covered.

The one gap is Internet Explorer 11, which doesn't support clip-path at all. Elements simply render as their original rectangles — a safe fallback. For older Safari versions (pre-14), adding -webkit-clip-path alongside the standard property covers those cases.

Can I Use tracks clip-path support across browsers with detailed version breakdowns.

Practical Use Cases

Image Masks Without Image Editing

Apply clip-path directly to <img> elements to create circular avatars, hexagonal profile pictures, or diagonal image sections. No need to pre-process images in an editor. Pair this with a color wheel to pick complementary background colors that frame your clipped images.

Hero Section Angles

Diagonal or slanted section transitions are a staple of modern landing pages. A polygon clip on a hero section creates a dynamic angled bottom edge:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Creative Card Layouts

Break free from rounded rectangles. Give cards subtle geometric edges or arrow shapes that direct attention. Keep the shapes subtle — aggressive clips on content-heavy cards hurt readability.

Decorative Section Dividers

Full-width divs with clip-path create angled or curved transitions between content sections. No SVG files, no background images — just CSS.

Tips for Better Clip-Path Shapes

Use percentages, not pixels — Percentage coordinates scale with the element. Pixel values break at different screen sizes.
Use filter: drop-shadow() instead of box-shadow — box-shadow follows the original rectangle, not the clipped shape. drop-shadow respects the clip.
Animate between shapes with the same point count — CSS transitions interpolate clip-path values, but only cleanly when both states have the same number of polygon points.
Combine with gradients — Clipped elements with gradient backgrounds create rich visual effects without images.

For adding icons to your clipped cards or sections, browse the free icons library for SVG icons that match your design.

Start Creating Clip-Path Shapes

You don't need to calculate coordinates by hand. Open the clip path editor, choose your shape type, drag the handles, and copy the CSS. For a deeper dive into creative shape techniques, read our CSS shapes for modern web design guide. The MDN clip-path documentation covers the full property reference for advanced use cases.

Blog