Draw clip-path shapes by dragging points, or use circle, ellipse and inset.
Drag the white handles on the preview to move each point.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Polygon for anything with straight edges, circle and ellipse for round crops, and inset for a rectangle cut in from the sides with optional rounded corners.
With polygon you drag the handles directly on the preview and add or remove points. The other functions use sliders for their radii and centre position.
The value uses percentages, so the shape scales with whatever element you apply it to rather than breaking at a different size.
It hides everything outside a shape, so you can crop an image to a hexagon, cut an angled edge on a section, or build a speech bubble without an extra element or a background image.
No. Clipped areas stop receiving pointer events too, so a clipped button is only clickable inside the visible shape. That is usually helpful, and occasionally surprising.
Percentages, almost always. They keep the shape proportional as the element resizes, which is why every value this tool produces is a percentage.
Yes, but only between shapes of the same type with the same number of points. Animating a polygon with four points to one with six will not interpolate, it will jump.
Percentages are relative to the element's own width and height, so the same values on a wide box produce a wider shape. Keep the element square, or adjust the vertical values to compensate.
clip-path cuts with a hard geometric edge. A mask uses an image or gradient, so it can fade out gradually. Use clip-path for shapes and masks for soft edges.
Yes. All the basic shape functions used here work in every current browser without a prefix.
Yes, completely free with no sign-up.
Round corners visually, including the slash syntax that produces organic blob shapes.
Open ToolURL-encode an SVG into a data URI for CSS backgrounds and masks, smaller than Base64.
Open ToolCSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
Open Tool