How to use SVG Blob Generator
- Choose the number of points and how random the shape is.
- Pick a color and press New shape until you like it.
- Copy the SVG markup.
About this tool
A blob is a closed curve through points placed around a circle at slightly different distances from the center. The points are joined by smooth Bezier curves so there are no sharp corners. More points create a more complex outline and higher randomness makes the shape less round.
The SVG scales without losing quality, so it works for backgrounds, avatars and decorative shapes.
Frequently Asked Questions
- Can I use the blob as a CSS background?
- Yes. Save it as an .svg file or use it as a data URL in background-image.
- Can I get the same shape again?
- Each press creates a new random shape, so copy the SVG when you find one you want to keep.
Related tools
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.
- CSS Border Radius GeneratorRound each corner separately and copy the CSS.
- CSS Text Shadow GeneratorAdd depth or a glow to text and copy the CSS.
- PX to REM ConverterConvert between pixels and rem for scalable CSS.
- CSS Clamp GeneratorCreate fluid sizes that grow between a minimum and maximum viewport.
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.