CSS Clip-Path Generator
Pick a shape, tweak its sliders, and copy the CSS clip-path value.
About the CSS Clip-Path Generator
Most of these shapes are plain coordinate polygons (percent positions relative to the box's own width and height), but the star is built with real trigonometry: ten points alternate between the outer edge and an inner radius you control, spaced 36 degrees apart starting from the top. The message bubble adds a few extra points around each corner to fake rounding, since clip-path only draws straight lines between the coordinates you give it, plus a small triangular tail that pokes out past the box's own bottom edge.
How the star's ten points are placed with trigonometry
A five-pointed star actually needs ten vertices, not five, alternating between the outer tips and the inner "valleys" between them. This tool loops ten times, and on each even iteration it places a point at radius 50% (the outer edge), on each odd iteration it places a point at your chosen Inner Radius value instead, using standard cos/sin trigonometry to convert an angle into an x/y coordinate: x = 50 + r × cos(angle), y = 50 + r × sin(angle). The loop starts at -90 degrees specifically so the very first vertex lands straight up at the top of the box, matching how a star is conventionally drawn, then advances 36 degrees per step (360 ÷ 10 points). Dragging the Inner Radius slider closer to 50% makes the star look more like a decagon; dragging it toward 10% makes the points sharper and spikier.
The message bubble's "rounded" corners are actually chamfers
clip-path: polygon() can only draw straight line segments between the coordinates you give it, there's no way to specify a curved arc within a polygon path. To fake a rounded corner, this tool inserts one extra diagonal point right at each of the box's four corners, cutting the sharp 90-degree corner into two 135-degree angles instead. That's technically a chamfered (beveled) corner, not a true circular arc, at a large enough radius the difference is visually subtle, but zoomed in you'd see a flat diagonal cut rather than a smooth curve. Getting a genuinely round corner inside a clip-path would require many small points to approximate a circle's arc, or switching to the separate border-radius property instead if you don't also need clip-path's other polygon shaping.
A real gotcha: the bubble's tail can get invisibly clipped
The speech-bubble tail is built from three points, and one of them sits at 22% 116%, meaning 16% of the box's height below its own bottom edge. Polygon coordinates in clip-path are allowed to extend past 0-100%, but clip-path can only reveal pixels that the element actually paints within its own box, it can never make an element render content outside its own dimensions. So if you apply this bubble shape to an element that's exactly sized to its content with no extra bottom margin or padding, that tail will get sliced off at the box's real edge and simply won't be visible. To see the full tail, the parent needs enough room below the box, either by adding bottom margin to the shaped element or by giving its container extra height.
Circle() versus polygon() for round shapes
Rather than approximating a circle with dozens of polygon points, the Circle/Ellipse option uses the dedicated circle(radius at position) clip-path function, which draws a mathematically perfect circle rather than a many-sided approximation. The radius is a percentage of the box's diagonal reference size, and the at x% y% portion lets you move the circle's center anywhere within (or even outside) the box, which is how this tool's Position X/Y sliders work, useful for spotlighting one specific area of an image rather than always clipping from dead center.
Browser support and the -webkit- prefix
This tool sets both clip-path and -webkit-clip-path on the preview element, and the copied CSS includes the standard property. Unprefixed clip-path has been supported in all major browsers for years, but the -webkit- prefixed version is worth keeping in your own stylesheets too if you need to support slightly older WebKit-based mobile browsers, since it costs nothing extra and only the unprefixed property is read by modern engines anyway.
Frequently Asked Questions
Why does the star shape need ten points instead of five?
A five-pointed star has five outer tips and five inner "valley" points between them, ten vertices total. This tool alternates between an outer radius of 50% and your chosen inner radius on every other point, using trigonometry to convert each angle into an x/y coordinate.
Are the message bubble's rounded corners a true curve?
No, they're chamfers. Since clip-path polygon() can only draw straight lines, each corner gets one extra diagonal point that cuts the sharp corner into two angled edges. It approximates rounding but isn't a smooth arc, a real border-radius would be needed for a true curve.
Why might the speech bubble's tail not show up on my element?
The tail's point sits 16% below the box's own bottom edge. clip-path can only reveal pixels the element actually paints within its own dimensions, it can't render content outside the box. If there's no extra margin or padding below the element, that portion of the tail gets invisibly clipped at the real edge.
Why does the Circle option use circle() instead of a polygon?
The circle() function draws a mathematically perfect circle directly, rather than approximating one with many straight polygon segments. It also supports a simple radius-and-position syntax, which is what powers this tool's Radius and Position X/Y sliders.
Do I need the -webkit- prefix for clip-path to work everywhere?
Unprefixed clip-path is supported in all current major browsers, so it's not strictly required anymore. This tool still includes -webkit-clip-path alongside it for extra safety with older WebKit-based mobile browsers, at no real cost since modern browsers simply ignore the prefixed version.
Can clip-path create soft or blurred edges instead of hard lines?
No, clip-path always produces sharp, hard-edged boundaries since it's a binary visible/hidden mask along the shape's outline. If you need a soft, gradient, or blurred edge fade, you need the separate mask-image property instead, which supports gradients for partial transparency.