CSS clip-path Generator

Boxes are the default shape of the web, and clip-path is the property that lets you break out of it. It hides every part of an element outside a shape you define, so a rectangular image can become a hexagon, a banner can get a slanted edge, and a card can have a speech-bubble tail. The shape is described in CSS, so there is no image to download, and with percentages it scales with the element. This page lets you draw the shape by dragging points and copy the rule.

Four kinds of shape

polygon() takes a list of points and joins them with straight lines, which covers most designs. circle() and ellipse() take a radius and a centre. inset() pulls each edge in by an amount and can round the corners, which is a handy way to crop an image with a soft frame. The page writes all four in the percentage form, so one rule fits an element of any size.

A worked example

Press Sample and the page loads a five-pointed star, ten points alternating between an outer and an inner radius with the inner radius at 38.2% of the outer, the proportions of a regular star. It writes clip-path: polygon(50% 0%, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.5%, 50% 69.1%, and continues round to the first point. Drag any of the round handles and the rule changes as you move. The side buttons start from a triangle, a hexagon, an octagon or a chevron, and “Regular +1 side” rebuilds a regular polygon with one more corner.

Working with points

Handles snap to whole percentages, which keeps the rule short. Add or remove sides with the regular-polygon buttons, then drag the points where you want them. The paste box accepts a rule that already exists, such as clip-path: polygon(50% 0%, 100% 100%, 0% 100%); if every point is a pair of percentages the page offers to load it so you can edit it. Points given in pixels, calc() values and shapes using keywords such as at left top are not loaded.

Edge cases

The clipped-away part does not take clicks or hovers, so a slanted banner with a clipped corner is not clickable in the corner. Shadows and outlines drawn outside the shape are cut, so put them on a wrapper. A polygon needs at least three points; a self-crossing outline fills with the non-zero rule by default and can look odd. Percentages refer to the element’s border box, so padding does not shift the shape.

Limits

The editor works on a square preview; the percentages apply to any box, but a non-square element stretches the shape. Only percentage polygons can be loaded. The page does not generate path() shapes or SVG masks. Everything runs in your browser.

Animating and interacting

Two polygons can be animated into each other with a transition on clip-path, but only when both have the same number of points and the same kind of shape function. If a hover state has five points and the resting state has four, the browser swaps instantly instead of morphing. Design the pair together, repeating a corner if one shape needs fewer points. The clipped-away area also stops reacting to the pointer: clicks and hover only register inside the visible shape, which is useful for diagonal buttons and a nuisance for tiny targets, so keep touch targets large.

Related tools

• Border-Radius Blob Generator makes organic outlines with rounded corners.
• CSS Triangle & Tooltip Arrow Generator covers simple arrows.
• SVG Blob Shape Generator draws smooth shapes as paths.
• CSS Gradient Generator fills a clipped element with colour.