Cómo usar: SVG Blob Generator
- Click New random blob until you like the shape.
- Use Complexity for more or fewer bumps and Randomness for a rounder or wilder outline.
- Pick a solid color, a gradient or an outline.
- Download it as SVG (scales to any size) or PNG, or copy the SVG code into your HTML.
How the blobs are made
The generator places points around a circle, moves each one in or out by a random amount, and joins them with a smooth closed curve (cubic Bézier segments through every point). More points give more bumps; more randomness gives a less circular outline. The result is a single <path> — tiny, crisp at any size and easy to recolor.
Using blobs on a website
- Background decoration: place the SVG absolutely behind a hero section, with a soft color or low opacity.
- Image masks: use the blob as a
mask-imageor turn the path into aclip-path: path()to crop a photo into the shape. - Animation: generate two blobs with the same complexity and animate between them with CSS or SMIL for a “morphing” effect.
Need a pure-CSS shape instead? The Border Radius Generator makes blobs with 8 radius values. For section dividers, try the SVG Wave Generator.
También se busca como: blob generator, blob shape generator, organic shape generator, random blob svg, blob maker, svg shape generator, abstract shape generator.
Herramientas que combinan con: SVG Blob Generator
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- SVG Optimizer — Clean up SVGs exported from Figma, Illustrator, Inkscape or Sketch with SVGO — and check the before/after preview to make sure the icon still looks right.
- Convertidor de SVG a PNG — Convierte gráficos vectoriales SVG en imágenes PNG nítidas con el tamaño exacto que necesites: para tiendas de aplicaciones, redes sociales, correo electrónico o documentos.
Preguntas frecuentes
How do I make a blob shape?
Click New random blob, adjust complexity and randomness, and download the SVG. Each blob is a single smooth path.
Can I use the blobs commercially?
Yes. The shapes are generated randomly on your device — use them in any project, no attribution needed.
How do I put an image inside a blob?
Use the SVG as a CSS mask (mask-image: url(blob.svg)) on the image, or copy the path into an SVG clipPath.
SVG or PNG?
SVG for websites — it stays sharp at any size and is tiny. PNG for apps that don’t accept SVG, such as some slide or social tools.
¿Puedo instalar SVG Blob Generator como aplicación web y utilizarla sin conexión?
Sí. SVG Blob Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.