Generador de blobs SVG
Crea formas orgánicas suaves y aleatorias para fondos, avatares, ilustraciones y máscaras de imagen. Ajusta la complejidad y el contraste, añade un degradado o un contorno y exporta un SVG, un PNG transparente o un CSS clip-path.
Última actualización:
Cómo usar Generador de blobs SVG
- Haz clic en Generar nuevo blob o elige una de las formas alternativas bajo la vista previa.
- Ajusta la complejidad y el contraste: más puntos crean contornos más recargados y más contraste los hace menos redondos.
- Elige el relleno: un color sólido, un degradado de dos colores con cualquier ángulo o un contorno.
- Expórtalo: descarga el SVG o el PNG, o copia el código SVG o el CSS clip-path.
Cómo se crean las formas de blob
- Puntos en un círculo. El número de puntos elegido se reparte uniformemente alrededor del centro de un lienzo de 400 × 400, con un pequeño desplazamiento aleatorio del ángulo.
- Distancias aleatorias. La distancia de cada punto al centro se acorta en una cantidad aleatoria. El contraste fija el máximo: con 0% todos los puntos están en el círculo y con 100% un punto puede acercarse al centro más de la mitad del radio.
- Contorno suave. Se traza una spline Catmull-Rom cerrada que pasa por los puntos y se escribe como curvas Bézier cúbicas (comandos
C), de modo que cada curva fluye hacia la siguiente sin esquinas. Una suavidad menor acorta los tiradores de control hasta que el contorno se convierte en un polígono.
El resultado es un único <path> compacto, normalmente de 300 a 700 bytes, que se escala a cualquier tamaño sin perder nitidez.
Qué ajustes usar
| Objetivo | Puntos | Contraste | Relleno |
|---|---|---|---|
| Fondo suave detrás de una foto | 5–7 | 20–40% | Sólido claro o degradado |
| Acento divertido para ilustraciones | 6–9 | 50–70% | Degradado vivo |
| Avatar o máscara de imagen | 5–6 | 15–30% | CSS clip-path |
| Marco con estilo dibujado a mano | 7–10 | 30–50% | Contorno, 3–6px |
| Forma puntiaguda, tipo salpicadura | 10–12 | 80–100% | Sólido, poca suavidad |
Usar blobs en CSS
Como fondo, pega el data URI en background-image y posiciónalo con background-position y background-size. Para recortar una foto con la forma del blob, aplica el clip-path: path(...) generado a una imagen de 400 × 400 px. Como path() usa unidades en píxeles, envuelve la imagen y escala el contenedor con transform: scale() para otros tamaños, o usa el SVG como mask-image, que se escala con el elemento.
Preguntas frecuentes
¿Qué es un blob SVG?
Un blob es una forma cerrada, suave e irregular, como una gota de líquido. Los diseñadores usan blobs como fondo detrás de fotos y textos, como marcos de avatar y como acentos decorativos. En SVG se mantiene nítido a cualquier tamaño y pesa mucho menos de 1 KB.
¿Cómo se generan las formas de blob?
Se colocan puntos alrededor de un círculo a ángulos iguales y la distancia de cada punto al centro varía aleatoriamente según el contraste. Una spline Catmull-Rom cerrada que pasa por esos puntos se convierte en curvas Bézier cúbicas, lo que da un contorno suave.
¿Cómo uso un blob como máscara de imagen?
Copia la salida CSS clip-path y aplícala a una imagen de 400 por 400 píxeles, o usa el SVG como máscara en una herramienta de diseño. clip-path: path() usa coordenadas en píxeles, así que escala la imagen o el trazado para que coincidan.
¿Puedo cambiar los colores del blob después?
Sí. En el código SVG, cambia el atributo fill del trazado o los valores stop-color del degradado. El SVG en línea también se puede colorear con CSS usando fill: currentColor.
¿Puedo usar los blobs con fines comerciales?
Sí. Cada forma se genera aleatoriamente en tu navegador, así que puedes usarlas en trabajos personales y comerciales sin atribución.
¿Cómo pongo un blob detrás de un texto o una foto?
Usa el SVG como background-image de CSS o posiciona el SVG en línea de forma absoluta detrás del contenido con un z-index menor. La salida data URI se puede pegar directamente en background-image: url(...).
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.