Generador de fondo CSS de Burbujas de Gradiente Aurora
Guía
Generador de fondo CSS de Burbujas de Gradiente Aurora
Crea fondos suaves y brillantes de estilo de aurora con hasta cuatro globos coloreados que puedes arrastrar, recolorar y modificar el tamaño en un lienzo en tiempo real. La herramienta genera código CSS listo para producción usando radial-gradient y filter: blur(), o un SVG portátil usando feGaussianBlur — así que puedes pegar el resultado en cualquier sitio web, página de presentación o sección principal en segundos.
Cómo Usar
- Elige un color base para el fondo detrás de los globos.
- Ajusta el desenfoque global barra de deslizamiento para controlar cuán suave aparece la luz de aurora.
- Para cada globo habilitado, establece su color, posición, tamañoy transparencia — o simplemente arrastra el manija numerado en la vista en tiempo real.
- Cambia la salida a CSS o SVG según dónde quieras pegarla.
- Haz clic en Aleatorizar si deseas un punto de partida rápido, luego ajusta desde allí.
- Copia el código con el botón de copiar — pégalo en tu hoja de estilos o componente.
Características
- Editor de lienzo con múltiples globos – Hasta cuatro globos independientes, cada uno con su propio color, posición, tamaño y transparencia.
- Arrastrar para repositionar – Toma el manija numerado en la vista en tiempo real y muevete a cualquier lugar; los deslizadores se mantienen sincronizados.
- Control de desenfoque global – Una barra de deslizamiento ajusta la suavidad general del efecto de aurora para todos los globos al mismo tiempo.
- Salida en CSS o SVG – Obtiene un código limpio
radial-gradientstack confilter: blur(), o un SVG autónomo que utilizafeGaussianBlur. - Botón de aleatorización – Genera colores y posiciones nuevos para los globos habilitados para inspirar ideas.
- Copiar y descargar – Copia o descarga en un solo clic el código generado, listo para integrarlo en tu proyecto.
Preguntas frecuentes
-
¿Qué es un fondo de gradiente de aurora?
Un gradiente de aurora es un estilo de fondo que imita las bandas suaves y desenfocadas de la aurora boreal. Normalmente se construye superponiendo varios grandes círculos de color desenfocados sobre una base oscura, de modo que los colores se mezclan suavemente en lugar de encontrarse en líneas rectas. Este estilo se volvió popular en las páginas de presentación de servicios SaaS porque añade profundidad y atmósfera agradable para el movimiento sin el peso visual de una fotografía.
-
¿Cómo crea el efecto de grupo CSS radial-gradient combinado con filter:blur?
Un radial-gradient dibuja un círculo de color que se desvanece hasta un punto elegido, por lo que superponer varios de ellos produce discos de color con bordes claros. Aplicar filter:blur al capa suaviza esos discos al promediar cada píxel con sus vecinos, transformando los círculos duros en grupos esparcidos y brillantes. Aumentar el radio de desenfoque extiende más el promedio, lo que hace que los grupos parezcan más grandes y difusos, aunque los gradientes subyacentes no cambien.
-
¿Cuál es la diferencia entre usar CSS filter:blur y SVG feGaussianBlur?
Ambos aplican un desenfoque de tipo Gaussiano, pero existen en diferentes pipelines de renderizado. CSS filter:blur es rápido y acelerado por hardware en la mayoría de los navegadores, pero puede cortarse en los bordes del elemento y puede interactuar de forma inesperada con transformaciones, contextos de pila o filtros de fondo. SVG feGaussianBlur forma parte del gráfico de filtros de SVG, por lo que compone de forma predecible dentro del área de vista SVG y es fácil de integrar como un solo recurso autónomo, lo cual es útil cuando deseas que el fondo se mueva con el marcado o cuando lo exportas como imagen.
-
¿Por qué los fondos desenfocados se consideran una preocupación de rendimiento?
Los filtros pesados de desenfoque obligan al navegador a repintar grandes áreas cada vez que cambian, y un radio de desenfoque grande aumenta el tamaño del kernel que debe convolucionar el GPU. En dispositivos de bajo rendimiento, animar un elemento fuertemente desenfocado o superponer muchas capas desenfocadas sobre contenido que se desplaza puede reducir la tasa de fotogramas y agotar la batería. Las soluciones comunes son mantener las capas desenfocadas estáticas, pre-renderizarlas en una imagen cuando sea posible, o moverlas a una capa compuesta separada para que el resto de la página no se desenfoque en cada desplazamiento.
Instalar extensiones
Agregue herramientas IO a su navegador favorito para obtener acceso instantáneo y búsquedas más rápidas
恵 ¡El marcador ha llegado!
Marcador es una forma divertida de llevar un registro de tus juegos, todos los datos se almacenan en tu navegador. ¡Próximamente habrá más funciones!
Herramientas clave
Ver todo Los recién llegados
Ver todoActualizar: Nuestro última herramienta se agregó el 18 de junio de 2026
Involucrarse
Ayúdanos a seguir brindando valiosas herramientas gratuitas
