How to make a blob shape
- On the Border radius tab, drag the dots on the edges of the shape, or type values in the eight boxes. Press Random blob for a quick start.
- Press Copy CSS and paste the
border-radiusline onto any element with a width and height. - For a shape you can place anywhere, open the SVG blob tab, set complexity and contrast, press New shape until you like it, and download the SVG or PNG.
Percentages scale with the element, so one blob works at any size. A square element gives round blobs, and a wider element gives stretched ones.
Questions
Is anything uploaded or saved?
No. The shapes are drawn and the code is written by your browser. Nothing is sent to a server or stored.
How does the CSS make an organic blob shape?
The border-radius property accepts up to eight values: four horizontal radii, a slash, then four vertical radii. When the horizontal and vertical values differ, each corner becomes an ellipse and the box turns into a smooth, uneven blob.
Why can I not drag a handle all the way?
Two radii on the same edge cannot add up to more than 100 percent, or the corners would overlap. Browsers shrink them proportionally in that case, so the tool stops at the limit and shows you exactly what will render.
What do complexity, contrast, and seed do in the SVG blob?
Complexity is how many points the outline passes through. Contrast sets how far points move toward the center: 0 gives a circle and 10 a very lumpy shape. The seed picks one particular shape, so the same seed always gives the same blob.
Which export should I use for the SVG blob?
Use SVG for websites and design tools, since it stays sharp at any size and is tiny. Use the 1024 pixel PNG when you need a plain image for slides or social posts.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.