CSS

CSS Clip-Path / Shape Generator

Polygon, circle, ellipse and inset clip-path shapes with a drag-to-edit visual point editor, 13 named polygon presets, a real-image preview, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Builds a CSS clip-path value by dragging points directly on a live preview, instead of typing coordinate pairs into a polygon() function by hand and guessing how they'll look.

Polygon: drag-to-edit points

Each point in the polygon is a draggable handle on the preview — drag one to reshape the polygon in real time, add a point (inserted at the midpoint of the closing edge), or remove any point down to a minimum of 3. 13 named presets — triangle, diamond, hexagon, pentagon, octagon, both arrow directions, message bubble, cross, star, chevron, parallelogram, and trapezoid — give a starting shape to then drag into something more specific.

Circle, ellipse and inset

The other three clip-path shape functions each get their own draggable handles too — a circle's center and radius, an ellipse's center and independent X/Y radii, and an inset's four edges plus an optional rounded corner — rather than only sliders with no visual feedback on the shape itself.

Previewing on a real image

Upload any image to see exactly how the clip shape crops real content, since a clip-path's effect is much easier to judge against a photo than a flat gradient block.

Getting the CSS out

A randomize button generates a fresh shape of whichever type is selected. Export as plain CSS, a Tailwind arbitrary-value class, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything, including any uploaded image, is processed entirely in your browser -- nothing is sent to a server.

FAQ

Frequently asked questions

Is my uploaded image sent anywhere?

No. The image and every clip-path calculation stay entirely in the browser -- nothing is uploaded to a server.

Can I edit the shape by dragging instead of typing coordinates?

Yes -- every shape type has draggable handles directly on the preview: polygon points, a circle's center and radius, an ellipse's center and radii, or an inset's four edges.

How many points can a polygon have?

Any number from 3 upward -- points can be added (inserted at the midpoint of the closing edge) or removed, down to a minimum of 3 to keep it a valid polygon.

What polygon presets are available?

Triangle, diamond, hexagon, pentagon, octagon, arrow left/right, message bubble, cross, star, chevron, parallelogram, and trapezoid -- each loads as a starting point to drag further if needed.

Can I preview the clip shape on my own image?

Yes -- uploading an image shows exactly how the shape crops real content, which is much easier to judge than against a flat placeholder gradient.

What export formats are available?

Plain CSS, a Tailwind arbitrary-value class, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.