Blob avatar mask
Free, no sign-up, runs in your browser.
Cutting a photograph into a blob instead of a circle. This is where clip-path earns its place — the image keeps its content and gets a new silhouette, rather than sitting behind a shape.
The recipe
| Shape | Organic blob |
|---|---|
| Export as | CSS clip-path |
| Size | 620 B |
Step by step
- Pick Organic blob and shuffle until the silhouette suits the photo.
- Export as CSS clip-path — you will get an inline SVG block and a CSS rule.
- Paste the SVG block anywhere in the document; it is hidden and only referenced by id.
- Apply the class to your image and give it the size the output specifies.
What you will be copying
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.8,40.44 59.45,51.92 51.92C63.4 4…In more detail
Give the image `object-fit: cover` as well, or a photograph with a different aspect ratio will distort before it is clipped. And if you use more than one blob mask on a page, change the id in both the SVG block and the CSS rule — duplicate ids mean every clipped element takes whichever shape the browser found first.
Questions
Which shape should I start from for Blob avatar mask?
Organic blob, exported as CSS clip-path. That pairing is the one this page is built around, and the preview above is that exact shape — but it is a starting point, not a rule. Every slider stays live once you open it.
How much does it add to the page?
About 620 bytes for this combination. That is smaller than a single icon and it needs no network request at all, because the shape is markup rather than an image file.
Will it work on mobile?
Yes. A wave divider is set to stretch to its container rather than keep its aspect ratio, which is what lets one shape span any screen width without letterboxing. Blobs keep their proportions, since a stretched blob is just an ellipse.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.