Blob Generator
Click randomize until a shape feels right, or fine-tune the number of points and how irregular it is. The seed is saved so you can recreate the same blob.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="size-64 text-cyan-700" fill="currentColor" aria-hidden="true"> <path d="M178.2,100 C180.4,119.5 168.8,155.7 153.3,166.8 C137.7,177.9 102.1,173.7 84.8,166.6 C67.5,159.6 59.4,141.4 49.4,124.3 C39.5,107.2 20.2,82.3 25.4,64.1 C30.6,45.8 61.4,17.1 80.5,14.7 C99.7,12.3 123.9,35.4 140.2,49.6 C156.5,63.9 176.1,80.5 178.2,100 Z"/> </svg>
Frequently asked questions
How do I use a blob as a background in Tailwind?
Place the SVG in an absolutely positioned wrapper behind your content: absolute -z-10 with a size class, and color it with a text class such as text-cyan-100. Use pointer-events-none so it does not block clicks.
How are the blobs generated?
Points are placed around a circle, each pushed inward by a random amount, then joined with smooth cubic curves. Randomness controls how far points move, and the seed makes the result repeatable.
How do I get a softer, rounder blob?
Lower the randomness and use more points. Few points with high randomness gives bold, irregular shapes.
Can I blur or fade a blob?
Yes. Add blur-3xl and opacity-40 to the SVG for a soft glow behind a hero. The filter generator shows the exact classes.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.