Draw custom polygons, circles, ellipses and inset shapes without guessing coordinates. Drag every point, preview the result live and copy clean CSS.
Turn a plain rectangular element into a distinctive interface detail while the generator writes the exact clip-path function for you.
Move polygon vertices directly on the canvas or use arrow keys for precise, accessible one-percent adjustments.
Use triangles, stars, arrows and speech bubbles, or switch to circle, ellipse and rounded inset controls.
Percentage-based coordinates adapt with the element, so your shape stays useful across responsive layouts.
Choose a preset, then drag the visible points to reshape the preview. For a custom polygon, add a new point and edit any X or Y percentage directly. Every handle also supports the arrow keys; hold Shift to move by five percent at a time.
Switch between Polygon, Circle, Ellipse and Inset for different CSS basic shapes. Try the square, wide and tall previews to see how percentage coordinates respond to different element sizes. When you are happy with the result, select Copy CSS.
The clip-path property defines the visible region of an element. Anything outside the polygon, circle, ellipse or inset path is hidden without changing the element's layout box.
Begin with any polygon preset, drag its handles, add or remove points, and fine-tune each X and Y percentage. The generated polygon() value updates immediately.
Yes. Modern browsers support CSS basic shapes on images, div elements and many other HTML and SVG elements. Test complex interactions because clipped elements keep their original layout box.
Yes. This online shape generator is free, requires no signup and works locally in your browser.
Keep building polished interfaces with these free online CSS generators.