Generador de fondos degradados animados — 11 estilos WebGL, vista previa en vivo
Previsualiza once fondos degradados y abstractos animados, renderizados en vivo con WebGL: blobs fluidos, luz ambiental, degradados por pasos, puntos difuminados, rejillas, cubos, ondas y mosaicos de triángulos. Cambia al instante entre estilos y seis paletas integradas, sin subidas ni servidor: esta es una herramienta de vista previa en vivo, no un exportador de CSS o imágenes.
Lo que este generador de fondos ofrece realmente
Once estilos de fondo impulsados por shaders
AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic y WavyWaves, todos animados de forma continua sobre un lienzo de 600 píxeles de alto.
Cambia estilo y paleta al instante
Dos menús desplegables lo controlan todo: uno para el estilo de fondo y otro para la paleta. Cambiar cualquiera de ellos reconstruye la animación de inmediato, sin botón de generación ni recarga de la página.
Seis paletas integradas
Monochrome, Red, Green, Blue, Yellow y Purple, cada una una lista fija de seis colores hexadecimales. Los estilos de cuatro colores usan solo los cuatro primeros valores y los de seis colores usan los seis; los colores sobrantes se truncan.
Se ejecuta localmente en tu GPU
Cada fotograma se dibuja mediante WebGL en el navegador. No se sube nada, no se hace ninguna llamada al servidor y la animación sigue funcionando sin tráfico de red.
Un espacio de pruebas de vista previa, no una herramienta de exportación
No hay salida CSS, ni descarga PNG o SVG, ni botón aleatorio, ni opción de ruido o textura, ni presets guardados. Tampoco se exponen el ángulo, las paradas de color, el apilado ni la velocidad.
Preguntas frecuentes sobre el generador de fondos
¿Qué tipos de degradado se admiten: lineal, radial, cónico o mesh?
Ninguno de los tipos CSS, en sentido estricto. Esta página renderiza once fondos con shaders WebGL: AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic y WavyWaves. Varios parecen degradados fluidos de estilo mesh, pero son animaciones de lienzo y no degradados background-image.
¿Qué puedo ajustar?
Solo dos cosas: el menú desplegable de estilo y el de paleta. No hay controles de ángulo, posición de parada de color, capas, selector de color, velocidad, pausa ni bucle. Las paletas son seis muestras fijas, y cada estilo consume cuatro o seis de esos valores.
¿Puedo exportar el fondo como imagen?
No. No hay ningún toDataURL, toBlob ni lógica de descarga en la página, así que el lienzo solo se puede ver: no se puede guardar como PNG, JPEG o SVG.
¿Genera código CSS que pueda copiar?
No. No hay salida CSS ni botón de copiar. Estos fondos son lienzos WebGL, no degradados background-image, así que no se pueden reducir a un fragmento de CSS; para eso necesitarías una herramienta de degradados CSS aparte.
¿Hay presets, generación aleatoria, ruido o ajustes guardados?
Los únicos presets son las seis paletas integradas. No hay botón aleatorio (la semilla está fija en 1000), ni opción de ruido o textura, ni guardado en almacenamiento local: al recargar la página vuelves a AbstractShape con la primera paleta.
¿Qué pasa cuando cambio de estilo o de paleta?
Cada cambio crea una nueva instancia de fondo y añade otro lienzo al mismo contenedor; la instancia anterior nunca se destruye, por lo que se apilan varios lienzos con el mismo id y lo que ves es el más nuevo. Recarga la página si has cambiado muchas veces.
¿Todo es local?
Sí. El renderizado ocurre por completo en tu navegador y tu GPU mediante WebGL, sin subidas ni peticiones al servidor. La pega es que un navegador sin compatibilidad con WebGL no tiene renderizado alternativo.
