Introducing the CSS Clip-Path Generator — Shapes Without SVG

Hexagon avatars, angled hero dividers, arrow callouts — all of it is possible with the CSS clip-path property and zero image files. The catch is writing the coordinate lists by hand. The new CSS Clip-Path Generator lets you build the shape visually and copies the exact CSS.

What it does

• Four shape types: polygon, circle, ellipse, and inset.
• Polygon presets: triangle, rhombus, pentagon, hexagon, star, and arrow.
• Editable points: add, edit, or remove anchor points from 3 to 12.
• Sliders for circle/ellipse radius and centre, and inset edges plus corner radius.
• Live preview over a checkerboard so transparency is obvious.
• Client-side: nothing leaves your browser.

Why it matters

clip-path keeps your markup lean — no exported PNGs, no SVG masks to maintain — and stays responsive because every coordinate is a percentage of the element box. Build the shape once, copy one line of CSS, and it scales with the element.

Learn the concepts

Our guide CSS clip-path Explained: Polygon, Circle, Ellipse, and Inset covers how the coordinate system works and when to reach for each shape.

Try it

Open the CSS Clip-Path Generator, start from a preset, and shape your next element.