CSS Clip-Path Generator

CSS's clip-path property can crop an element into a custom polygon shape, a diagonal section divider, an arrow-shaped button, a star-shaped badge, entirely without an image editor. Writing that polygon's coordinate list by hand, though, means guessing percentage values and reloading the page repeatedly to see if the shape looks right. This tool replaces that guesswork with a visual editor: click to add points, drag them directly over a live preview, and get the exact matching clip-path CSS value generated automatically underneath.

How the CSS polygon() function actually works

The polygon() function inside clip-path takes a list of coordinate pairs, each one a percentage position within the element's own box, and connects them in the order they are listed to define a closed shape. Anything inside that shape stays visible, everything outside it is clipped away entirely, as if it were never there, it doesn't just hide visually, it's also removed from click and hover interaction outside the clipped area. Because each point is a percentage rather than a fixed pixel value, the same clip-path polygon automatically scales correctly if the element's size changes, which is exactly why percentage-based points, the format this tool outputs, are the standard approach.

Why point order matters more than it seems

Because polygon() simply connects points in the order they appear in the list, the sequence you add or arrange points in directly determines the shape's outline, not just their positions. Points listed in a clean, roughly clockwise or counterclockwise order around the shape's perimeter produce a well-formed polygon. Points listed out of that order can produce a shape with crossing, self-intersecting edges, sometimes intentionally useful for a bowtie or hourglass effect, but often an unintended bug when it happens by accident. Dragging a point in this tool's editor keeps its position in the existing point order, so the visual preview always shows you exactly what the resulting shape looks like, self-intersections included, rather than silently reordering things behind the scenes.

Starting from a preset instead of a blank shape

Rather than placing every point from scratch, the preset shapes, triangle, trapezoid, pentagon, hexagon, star, arrow, and cross, load a complete, correctly ordered point set instantly, which you can then adjust from there rather than building from nothing. This is often the faster path even for a custom shape, start from the preset closest to what you want, then drag individual points to fine tune it, rather than manually placing every vertex of, say, a seven-point star from an empty canvas.

Common uses for clip-path in real layouts

A diagonal clip-path is a popular way to add a slanted section divider between two areas of a page without needing a background image. An arrow or chevron shape works well as a call-to-action button or a step indicator in a multi-step process. A star or badge shape can highlight a promotional label or rating without needing a separate image asset. Because clip-path is pure CSS applied to any element, it works on a background color, a photo, a video, or any other content, all without touching the underlying image file itself.

Runs entirely in your browser

The live preview and the generated CSS value are both built directly in your browser, nothing is sent to a server. If you need an equivalent shape as actual SVG markup rather than a CSS property, for use as an SVG clipPath element or standalone artwork, our SVG Code Editor is the right tool for that different but related format, part of the same SVG & Design Tools collection this tool belongs to.