Tiny Online Tools
Fondos Suaves y Etéreos Sin Imágenes Pesadas
Los fondos borrosos y coloridos —a veces llamados "aurora" o "gradient backgrounds abstractos"— se han convertido en un estilo recurrente para landing pages, dashboards y pantallas de inicio de aplicaciones. En lugar de servir un PNG pesado, este generador emite unas pocas elipses SVG desenfocadas con el filtro feGaussianBlur: el resultado es nítido a cualquier resolución, pesa unos pocos kilobytes y aprovecha al máximo la GPU del navegador.
Cómo Funciona
La herramienta esparce unas cuantas elipses aleatoriamente sobre un viewBox de 800×600 usando una función aleatoria con semilla. Cada elipse toma un color de tu paleta. Todo el grupo se envuelve en un filtro SVG que aplica un fuerte desenfoque gaussiano, lo suficiente para que las formas se fundan entre sí y produzcan ese aspecto suave, tipo nube.
Controles
- Formas — cuántas elipses borrosas dibujar. Más formas dan fondos más ricos y densos.
- Desenfoque — intensidad del blur gaussiano. Poco desenfoque mantiene las formas distintas; mucho las funde en un degradado.
- Varianza de tamaño — cuánto varían las formas en tamaño.
- Paleta — hasta cinco colores personalizados. Añade o quita colores para ajustarlos a tu marca.
- Fondo — un color sólido detrás de las formas borrosas.
- Semilla + Volver a lanzar — vuelve a lanzar para probar nuevas disposiciones; la misma semilla siempre da el mismo resultado.
Usos Comunes
- Fondos de sección hero
- Pantallas de inicio modernas
- Imágenes para redes sociales (OG)
- Fondos de sección de precios
- Fondos de tarjetas para páginas de marketing
El SVG se estira a cualquier contenedor con width: 100% gracias a preserveAspectRatio="none". Pega la salida directamente en tu HTML, React o herramientas de diseño, o ajusta los colores más tarde con un editor de texto.