✂️ Dev

CSS Clip-Path Generator

Create CSS shapes with clip-path: polygons, circles, ellipses and insets. Pick presets (star, hexagon, arrow, chevron) and copy the ready code. Everything in your browser.

Forma (preset)

CSS

O que é clip-path?

clip-path recorta um elemento em uma forma personalizada usando coordenadas (polygon()), círculo, elipse ou inset. Apenas a área dentro da forma fica visível — o restante do elemento é cortado.

Útil para criar headers diagonais, cards com cantos cortados, balões, setas e ícones complexos sem precisar de SVG ou imagens. Tudo no navegador.

Ready-made clip-path shapes you can copy

You need a hexagonal card, an arrow, or a notched corner, and writing a polygon() coordinate pair by coordinate pair is nobody's idea of fun. This page covers the common cases: pick one of nineteen preset shapes, from triangle and star to chevron and speech bubble, watch the cut applied to a sample square, and copy the CSS with clip-path and -webkit-clip-path already filled in.

Polygons come out with percentage coordinates, so the same shape works on a 40px avatar and a full-width banner without edits. Worth knowing: the clipping is only partly cosmetic. The element still occupies its original rectangle in the layout, but the clipped-away area stops receiving clicks. Circle, ellipse and inset get their own sliders for radius and margins; inset also supports rounded corners, which the tool emits using the round keyword.

There is no vertex dragging or point-by-point polygon editing here: the tool works from presets. If a shape needs fine-tuning, copy the code and edit the percentage pairs directly in your CSS; the format is perfectly readable. Also note the cut removes everything the element paints, including box-shadow; for a shadow that follows the shape, use filter: drop-shadow() on a parent element. Everything runs in your browser, nothing is uploaded.

Frequently asked questions

Can I edit the polygon points on this page?

No, the tool is preset-based. The generated code, though, is a polygon() made of readable percentage pairs; copy it and tweak the numbers in your editor until the shape looks right.

Why does the code include -webkit-clip-path?

Older Safari and iOS versions only understood the prefixed form. In current browsers the extra line is redundant but harmless; if you only target modern browsers, feel free to drop it.

Does clip-path cut off the element's shadow too?

It does. Box-shadow, border and background are painted by the element and disappear outside the shape. For a shadow that follows the cut, apply filter: drop-shadow() on a wrapper around the clipped element.

Related Tools

⬜

CSS Border Radius Generator

Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.

🔲

CSS Grid Generator

Build CSS Grid layouts visually: define rows, columns, gaps and alignment. Live preview and ready-to-copy CSS. Everything in your browser.

📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.