DEV Community

Rasika Dangamuwa
Rasika Dangamuwa

Posted on

CSS Clip-path Generator: Visually Build Polygon Shapes (With Real Examples)

#css #webdev #tools #frontend

If you've ever tried to cut a hero image into a diagonal shape or clip an avatar into a hexagon, you've probably hit the same wall: writing raw clip-path: polygon() coordinates by hand is tedious trial and error. I put together a free visual tool for this — CSS Clip-path Generator — where you drag handles on a live preview and copy out working CSS. Here's what it does and a few real examples you can use today.

The problem with hand-writing clip-path

clip-path: polygon() takes a list of x/y percentage coordinate pairs, and it's genuinely hard to eyeball. Move one point 5% too far and your triangle turns into a weird kite shape. Most people end up guessing, refreshing the browser, guessing again. A visual editor removes that loop entirely — you see the shape update in real time as you drag.

Diagonal hero sections

The most common use case: a diagonal cut at the bottom of a hero banner instead of a flat edge.

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
Enter fullscreen mode Exit fullscreen mode

That's a trapezoid — flat top, right side drops to 85% height, left side drops all the way to 100%. It creates a layered look where the next section peeks through the angled gap.

Hexagonal avatars

Hex-shaped profile photos show up a lot in team pages and portfolios:

.avatar {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 120px;
  height: 120px;
  object-fit: cover;
}
Enter fullscreen mode Exit fullscreen mode

Six points, equal width and height — that's the whole trick. Get the aspect ratio wrong and the hexagon stretches, so pin the dimensions.

Morphing shapes on hover

Because clip-path is animatable (as long as both states use the same number of points), you can morph a square into a diamond purely in CSS:

.card {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.4s ease;
}
.card:hover {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Enter fullscreen mode Exit fullscreen mode

Both shapes have four points, so the browser interpolates each coordinate independently and the transition animates smoothly instead of snapping.

What the tool actually does

The generator gives you 10 preset shapes (triangle, pentagon, hexagon, star, arrow, chevron, and more), a live preview with draggable handles, and numeric inputs if you want pixel-perfect coordinates instead of dragging. Add or remove points to build custom polygons beyond the presets. Everything runs client-side in your browser — nothing is uploaded anywhere.

A couple of practical notes if you're using clip-path in production: Safari 12 and earlier need the -webkit-clip-path prefix alongside the standard property, and clip-path shrinks the clickable/tappable area of an element along with its visible area — so don't clip interactive elements down to something too small to tap.

Try it here: nutilz.com/clip-path-generator — free, no signup, no upload.

Top comments (0)