DEV Community

Cover image for CSS Clip-Path: Cropping Images to Any Shape
kandz
kandz

Posted on

CSS Clip-Path: Cropping Images to Any Shape

#css #design #frontend #webdev

CSS clip-path is one of the most underused properties in modern web design. It lets you crop any element — images, divs, text — into circles, polygons, ellipses, or fully custom shapes without touching the original asset.

The problem? Writing polygon coordinates by hand is tedious. You guess each point. You reload. You adjust. You guess again.

In this guide, we'll break down how clip-path works, the different shape functions, and how to prototype shapes without losing your mind.

What is clip-path?

clip-path creates a clipping region. Anything inside the region is visible. Anything outside is hidden.

.clipped {
  clip-path: circle(50% at 50% 50%);
}
Enter fullscreen mode Exit fullscreen mode

The element stays the same size. The image data stays intact. Only the visible area changes.

The Four Shape Functions

1. circle()

Creates a circular clip.

.circle {
  clip-path: circle(50% at 50% 50%);
}
Enter fullscreen mode Exit fullscreen mode
  • 50% — the radius
  • at 50% 50% — the center point

You can also use absolute units:

.circle {
  clip-path: circle(100px at center);
}
Enter fullscreen mode Exit fullscreen mode

2. ellipse()

Creates an oval clip.

.ellipse {
  clip-path: ellipse(40% 60% at 50% 50%);
}
Enter fullscreen mode Exit fullscreen mode

The two values are the horizontal and vertical radii.

3. inset()

Creates a rectangular clip with optional rounded corners.

.inset {
  clip-path: inset(10% 20% 10% 20% round 20px);
}
Enter fullscreen mode Exit fullscreen mode

Order: top, right, bottom, left. The round keyword adds border-radius to the clip.

4. polygon()

The most powerful option. You define every vertex.

.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
Enter fullscreen mode Exit fullscreen mode

Each pair of values is an x/y coordinate. The shape is drawn by connecting them in order.

Real-World Use Cases

Use Case Shape
Circular avatars circle(50%)
Hexagonal cards polygon() with 6 points
Diagonal section dividers polygon() with 4 points
Custom image masks Any polygon
Star ratings polygon() with 10 points

The Hard Part: Polygon Coordinates

A simple triangle is easy. A hexagon is manageable. A 12-point star? You're guessing.

The typical workflow looks like this:

  1. Write polygon coordinates
  2. Save
  3. Reload browser
  4. Realize one point is off
  5. Adjust
  6. Reload
  7. Repeat

This is slow, frustrating, and error-prone.

Animating Clip-Path

clip-path is animatable. You can transition between shapes:

.card {
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 0.5s ease;
}

.card:hover {
  clip-path: circle(70% at 50% 50%);
}
Enter fullscreen mode Exit fullscreen mode

The browser interpolates between the two shapes — but only if both use the same function and the same number of points.

Common gotcha: You can't animate from circle() to polygon(). They must match.

Browser Support

clip-path is widely supported in modern browsers. polygon(), circle(), and ellipse() work in Chrome, Firefox, Safari, and Edge.

Older browsers may need the -webkit- prefix:

.clipped {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
Enter fullscreen mode Exit fullscreen mode

Prototyping Visually

If you're building shapes regularly, writing coordinates by hand doesn't scale. You need a visual editor that:

  • Shows the image with draggable handles
  • Updates the clip-path live
  • Exports clean CSS

I built a free CSS Clip-Path Image Cropper that does exactly this. Load an image, drag points, choose between polygon/circle/ellipse, and copy the CSS.

👉 tools.kandz.me/clip-path-cropper

100% client-side. Nothing uploaded.

What's your experience with clip-path? Do you use it for simple shapes or complex masks? Let me know in the comments.

Top comments (0)