CSS Clip-path Generator

CSS Clip-path Generator: Shape Presets You Can Copy Straight In

Writing a clip-path polygon by hand means calculating percentage coordinate pairs for every vertex, in order, and getting all of them right before you can see whether the shape is even close. Change the height and several of them need recalculating.

This CSS clip-path generator skips that. Pick a shape preset, copy the CSS, paste it in.

Presets, Not Coordinates

Common shapes are ready to use — triangle, circle, hexagon, arrow, and more. Choose one and the correct clip-path value is generated for you.

Copy the CSS to your clipboard, or download it as a .css file.

The advantage over hand-writing is not only speed. A generated polygon is mathematically consistent, so your hexagon has six equal sides rather than one that is slightly off because a coordinate got transposed.

What Clip-path Actually Does

It hides everything outside the shape you define, without altering the element's box. The element still occupies its full rectangular space in the layout; you are only controlling which part of it is visible.

That distinction explains two things people run into. First, surrounding content does not reflow around the visible shape — text will not wrap to a hexagon's slanted edge, because as far as layout is concerned the element is still a rectangle. Second, clipped areas are genuinely invisible, so anything important near the edges disappears.

It applies to whatever the element contains — an image, a background colour, a gradient, a video. Same property, same behaviour.

Where Each Shape Earns Its Place

Triangles for arrows, pointers, and angled section transitions.

Circles as an alternative to border-radius: 50%, useful when you want the crop and the border radius to behave independently.

Hexagons for team grids, feature icons, and portfolio thumbnails — the hexagon css clip path pattern that has been quietly popular for years because it fills a grid neatly while looking deliberate.

Arrows for process steps and breadcrumb-style progress indicators, where each step points to the next.

Browser Support

Strong across all modern browsers. Basic shapes and polygons are well supported and safe to use in production.

If you need to support very old browsers, check caniuse.com for the specifics. The sensible fallback pattern is to let the element render as an ordinary rectangle where clip-path is unsupported — the design loses a flourish but nothing breaks, since the content is all still there.

A Realistic Example: A Team Page Grid

A developer is building a team page. Twelve headshots in a square grid look like a database export, and the designer's mockup shows hexagons.

He picks the hexagon preset, copies the CSS, and applies it to the image class. Twelve headshots, consistent shape, no coordinate maths.

One adjustment follows: the tight crop clips the tops of two people's heads. He adds padding and adjusts the object position so faces sit centrally within the visible area — the kind of thing the preview makes obvious immediately and a hand-written polygon would have taken three attempts to diagnose.

Keep Text Away From Clipped Edges

The most common mistake is placing a caption or button near an edge that gets clipped. It renders fine in your editor, then vanishes on the live page.

Keep content well inside the visible area, and test at mobile width where the shape's proportions shift and the safe zone shrinks.

Who Uses It

Front-end developers building marketing pages. Designers prototyping section shapes. WordPress users pasting CSS into a custom block. Anyone who needs a non-rectangular element without opening a vector editor. The SVG Wave Generator and CSS Gradient Generator handle the other common section treatments. For a look at production front-end work, see our full-stack development case study.

Pick Your Shape Now

Coordinate maths is not the interesting part of front-end work. Choose a preset in the CSS clip-path generator above, copy the value, and get back to the build.