tool · one of 51 free, no counter
Shapes
How do I cut this element into a hexagon, a star or a blob?
Writing a clip-path polygon by hand is a list of percentages nobody can picture. This lets you drag the points instead - with a snap grid, twelve presets, and a generator for regular polygons and stars - or switch to a blob built from border-radius, and then puts the result on an element of the page in front of you, so the shape is judged on the photo or the card it is for.
Reach it Press ⌘ + K on any tab and type shapes. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
a clip-path polygon dragged into shape, or an organic blobCutting a hero image into an angle, making an avatar a hexagon, or giving a decorative block an organic edge without exporting an SVG from a design tool. The polygon also copies as an SVG path, for when the shape has to live somewhere a clip-path cannot.
Asked about this tool
3 of themWhat is the difference between Polygon and Blob?
A polygon is a clip-path, so it can have sharp corners and cut anything. A blob is an eight-value border-radius, so it is always smooth and keeps the element's own box, shadow and outline.
Does the shape stay on the page?
Only in this tab, until you undo it. Each applied shape is a row with its own undo, and a reload puts the page back as it was.
Why copy an SVG path as well?
Because some places cannot take a clip-path - an SVG mask, a canvas, a design tool. The path is the same outline in the other format.
how to use shapes
- Open Shapes and pick Polygon or Blob.
- Start from a preset, or drag the points, adding and removing them as you go.
- Select an element on the page and apply the shape to see it in place.
- Copy the clip-path, or the SVG path for the same outline.
96 of these · no host permissions · three free audits