Cómo usar: Generador de Blobs SVG
- Haz clic en Nuevo blob aleatorio hasta que te guste la forma.
- Usa Complejidad para más o menos protuberancias y Aleatoriedad para un contorno más redondo o más salvaje.
- Elige un color sólido, un degradado o un contorno.
- Descárgalo como SVG (se escala a cualquier tamaño) o PNG, o copia el código SVG en tu HTML.
Cómo se crean los blobs
El generador coloca puntos alrededor de un círculo, mueve cada uno hacia dentro o hacia fuera una cantidad aleatoria y los une con una curva cerrada suave (segmentos Bézier cúbicos que pasan por cada punto). Más puntos dan más protuberancias; más aleatoriedad da un contorno menos circular. El resultado es un único <path>: diminuto, nítido a cualquier tamaño y fácil de recolorear.
Usar blobs en una web
- Decoración de fondo: coloca el SVG en absoluto detrás de una sección hero, con un color suave o baja opacidad.
- Máscaras de imagen: usa el blob como
mask-imageo convierte el path enclip-path: path()para recortar una foto con esa forma. - Animación: genera dos blobs con la misma complejidad y anima entre ellos con CSS o SMIL para un efecto de «morphing».
¿Necesitas una forma solo con CSS? El Border Radius Generator crea blobs con 8 valores de radio. Para separadores de sección, prueba el SVG Wave Generator.
También se busca como: generador de blobs, generador de formas orgánicas, blob svg aleatorio, crear blob svg, generador de formas svg, generador de formas abstractas, blob maker.
Herramientas que combinan con: Generador de Blobs SVG
- Generador de clip-path CSS — Recorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono, estrella, flecha, chevron, bocadillo, círculo, elipse, inset redondeado…) y luego arrastra los puntos sobre una muestra o sobre tu propia imagen.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Optimizador SVG — Limpia los SVG exportados desde Figma, Illustrator, Inkscape o Sketch con SVGO y revisa la vista previa antes y después para asegurarte de que el icono sigue viéndose bien.
- 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
¿Cómo creo una forma blob?
Haz clic en Nuevo blob aleatorio, ajusta la complejidad y la aleatoriedad, y descarga el SVG. Cada blob es un único path suave.
¿Puedo usar los blobs con fines comerciales?
Sí. Las formas se generan de forma aleatoria en tu dispositivo: úsalas en cualquier proyecto, sin necesidad de atribución.
¿Cómo pongo una imagen dentro de un blob?
Usa el SVG como máscara CSS (mask-image: url(blob.svg)) sobre la imagen, o copia el path en un clipPath de SVG.
¿SVG o PNG?
SVG para webs: se mantiene nítido a cualquier tamaño y pesa muy poco. PNG para apps que no aceptan SVG, como algunas herramientas de presentaciones o redes sociales.
¿Puedo instalar Generador de Blobs SVG como aplicación web y utilizarla sin conexión?
Sí. Generador de Blobs SVG 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.