Blob Shape Generator
Generate organic blob shapes as SVG.
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <path d="M 313.01,137.77 C 353.24,239.91 307.85,287.64 266.38,314.97 C 224.91,342.30 143.68,383.14 105.33,363.98 C 66.97,344.82 28.33,240.97 36.24,200.00 C 44.14,159.03 113.49,138.93 152.76,118.18 C 192.03,97.44 238.30,61.90 271.86,75.53 C 305.43,89.17 355.07,160.09 354.15,200.00 Z" fill="#6366f1" /> </svg>
How to Use the Blob Shape Generator
Adjust the complexity slider to control how many points define the blob shape (3 for simple, 10 for intricate). Use the randomness slider to make the shape more organic. Pick a fill color or enable gradient mode for a two-color fill. Click "Randomize" to generate a new shape, then copy the SVG code, copy CSS background-image, or download the SVG file.
Frequently Asked Questions
What is a blob shape?
A blob is an organic, rounded shape often used in modern web design for backgrounds, illustrations and decorative elements. It is defined by a smooth closed SVG path.
How does complexity work?
Complexity controls the number of control points placed around a circle. More points create a more intricate outline while fewer points give a simpler, rounder shape.
What does the randomness slider do?
Randomness controls how far each point can deviate from a perfect circle. Low randomness produces near-circular shapes while high randomness creates more wild, organic forms.
Can I use the blob as a CSS background?
Yes. Click "Copy CSS" to get a data-URI background-image rule you can paste directly into your stylesheet.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →