CSS Clip Path Generator

How to Use

Pick a shape preset from the grid, the preview above (a colorful gradient square) updates instantly to show the clipped result. Circle and Ellipse also expose a radius slider so you can resize the shape without switching presets, the slider hides automatically for the fixed-point polygon shapes since they don't have a single radius to adjust. Copy the generated clip-path line and apply it to any element in your stylesheet, no other changes needed. The default state, a Circle at 50% radius, outputs clip-path: circle(50% at 50% 50%);, a full circle inscribed in the element, centered exactly in the middle.

What clip-path Does and How Shapes Are Defined

clip-path defines a visible region for an element using one of two main function types. circle() and ellipse() are parametric, defined by a radius (or two radii for an ellipse) plus a center position, which is why this tool exposes them with a single adjustable radius slider rather than a fixed list of coordinates. polygon(), used for every other preset here, triangle, rhombus, pentagon, hexagon, octagon, star, and the message box, instead lists an explicit sequence of x% y% coordinate pairs, one per corner, connected in order to form the shape's outline. Every coordinate in both function types is a percentage of the element's own width and height, not a fixed pixel value, which is exactly why the same generated CSS scales cleanly to any element size you apply it to, a 50% 50% point is always the exact center of the box, whether that box is 40 pixels or 400 pixels wide.

Reading Polygon Coordinates

Take the hexagon preset as a concrete example: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Reading it point by point, the shape starts a quarter of the way across the top edge (25% 0%), jumps to three-quarters across the same top edge (75% 0%), out to the vertical middle of the right edge (100% 50%), down to three-quarters across the bottom (75% 100%), back to a quarter across the bottom (25% 100%), and finally to the vertical middle of the left edge (0% 50%), before the browser automatically closes the shape back to its starting point. Each pair is simply an x-then-y coordinate, and the browser draws straight lines connecting them in the order listed, which is why hand-writing a polygon shape is really just a matter of plotting corner points around the box you're clipping.

Common Use Cases

Clip-path shapes show up frequently in image galleries and team pages, hexagon or octagon-cropped profile photos add visual interest without needing separately cropped image files for every photo. The message box preset generates a speech-bubble style shape useful for testimonial callouts, chat UI, or comic-style captions purely in CSS. Angled section dividers (using a simple polygon with only a few points) are a popular way to break up long pages of stacked rectangular sections without extra background images. Star and rhombus shapes are common for badges, ratings, and decorative accents, and applying a shape on hover, from a plain rectangle to a diamond, for example, is a lightweight way to add a playful interaction to buttons or cards.

Common Mistakes

Applying a shape designed and tested on a square element to a non-square one is the most common visual surprise, since every coordinate is a percentage of that specific element's width and height independently, a hexagon that looks perfectly regular on a 200 by 200 pixel box will look stretched or squashed on a 400 by 100 pixel box, the underlying geometry follows the box's actual proportions, not a fixed shape. Expecting a box-shadow to hug an irregular clipped shape is another frequent mismatch, covered in the FAQ below, since shadows are computed from the element's full rectangular box regardless of clipping. Finally, forgetting that clip-path only hides content visually, not from assistive technology or the DOM, is worth keeping in mind for accessibility, screen readers and keyboard navigation still see the full unclipped element and its content unless you separately manage focus and semantics for the visually hidden portion.

Frequently Asked Questions

What does clip-path actually do?

clip-path defines a visible region for an element, everything outside the shape is hidden while everything inside stays visible. Unlike cropping an image file, the underlying content is untouched, only its rendered, visible area changes, and it can be changed again anytime.

Why does the circle preset have an adjustable radius?

Circle and ellipse are parametric shapes defined by a radius (or two radii) and a center position, rather than a fixed set of corner points like a polygon. Adjusting the radius slider changes how much of the element the circle covers without needing a completely different shape definition.

Does clipping change the element's actual size or layout space?

No. clip-path only changes which part of the element is visible, the element's box, dimensions, and the space it takes up in your page's layout stay exactly the same as if no clipping were applied. This is different from actually resizing an element; the invisible, clipped-away regions still exist and still occupy their original position, they simply aren't rendered.

Will a box-shadow follow the clipped shape?

No, box-shadow is calculated from the element's original rectangular box, not its clipped visible shape, so a shadow on a star-shaped or hexagon-shaped clipped element will still show up as a rectangular shadow rather than hugging the shape's outline. To get a shadow that follows an irregular shape, use the filter: drop-shadow() function instead, which is computed from the actual rendered (and clipped) pixels rather than the element's box.

Is clip-path supported in all browsers?

Yes, both the polygon() and circle()/ellipse() forms this tool generates are supported without a vendor prefix in all current major browsers, Chrome, Firefox, Safari, and Edge. Very old browser versions had partial or prefixed support, but for any reasonably modern browser, the code this tool outputs works directly with no fallback needed.

Is my clip-path configuration sent anywhere?

No. Shape selection, the radius slider, the live preview, and the generated CSS are all handled locally with plain JavaScript, nothing about your chosen shape is transmitted to a server or stored beyond your current visit to the page.