¿Cómo crear un gradiente de malla en CSS puro sin imágenes externas ni SVG?

Puedes crear un gradiente mesh en CSS puro superponiendo múltiples capas de radial-gradient sobre una única propiedad background-color. Cada radial-gradient define un punto focal específico (por ejemplo, 'radial-gradient(at 20% 30%, #6366f1 0px, transparent 70%)') que se difumina hacia la transparencia, permitiendo que múltiples fuentes de luz cromática se crucen y fusionen armoniosamente sin peticiones HTTP adicionales.

¿Cómo animar un gradiente CSS mesh para fondos hero en sitios web?

Para animar un gradiente mesh con fluidez a 60 FPS sin ralentizaciones, asigna cada nodo cromático a un contenedor con posicionamiento absoluto o a un pseudoelemento con un desenfoque CSS pronunciado (ej. filter: blur(60px)). A continuación, aplica @keyframes de CSS con animaciones de transform: translate3d(dx, dy, 0) y scale(), aprovechando el compositor de la GPU del navegador en lugar de forzar costosos repintados de diseño en la CPU.

¿Cuál es la diferencia entre una malla con radial-gradient de CSS y un gradiente mesh en SVG?

Una malla creada con radial-gradient en CSS utiliza la superposición nativa de background-image, lo que no requiere peticiones HTTP externas, tiene un peso de archivo prácticamente nulo y se procesa instantáneamente en cualquier navegador moderno. En cambio, un gradiente mesh en SVG emplea marcado vectorial ( o parches de Bézier bicúbicos), ofreciendo escalado independiente de la resolución y compatibilidad con filtros avanzados (como grano feTurbulence), a costa de una estructura en el DOM ligeramente más compleja.

¿Cómo añadir textura de grano cinematográfico o ruido a un gradiente CSS mesh?

Para incorporar una textura de grano analógico, superpone un filtro de ruido SVG mediante un Data URI o SVG inline. El filtro utiliza combinado sobre el gradiente CSS mediante mix-blend-mode: overlay y una opacidad de entre 0.10 y 0.20, eliminando eficazmente el bandeado de color en 8 bits a la vez que confiere al fondo un acabado táctil y premium.

¿Un gradiente CSS mesh complejo perjudica el rendimiento web o el puntaje de Lighthouse?

Los gradientes mesh estáticos en CSS puro tienen un impacto prácticamente nulo en las métricas de rendimiento de Google Lighthouse, ya que no demandan carga de red ni descodificación de imágenes y se rasterizan directamente en la GPU. No obstante, animar de forma excesiva filtros backdrop-filter de gran radio (blur > 100px) en dispositivos móviles puede generar estrangulamiento térmico (thermal throttling); utilizar nuestros fotogramas clave preoptimizados con translate3d garantiza 60 FPS estables sin drenar la batería.

¿Cómo garantizar la legibilidad del texto y el contraste WCAG sobre gradientes mesh dinámicos?

Dado que los gradientes de malla presentan luminancias variables según la zona, utiliza nuestro analizador de contraste WCAG en 9 cuadrantes integrado para verificar las proporciones. Asegúrate de que todos los sectores sobre los que se sitúe texto conserven al menos un ratio de 4.5:1 para texto estándar (WCAG AA) o 3:1 para encabezados grandes. Si algún cuadrante no alcanza el umbral, añade una sutil capa semitransparente oscura o clara detrás del bloque tipográfico.

Generador de Gradientes Mesh CSS & SVG

Lienzo interactivo de malla

Arrastra los manejadores en el lienzo para reposicionarlos en tiempo real4 / 12 Puntos de control

Punto de control activo #1

Coordenada X15%

Coordenada Y20%

Radio de dispersión75%

Opacidad del punto90%

Color del punto:

Color base del lienzo:

Topología de malla

Grano de película analógica y ruido

18%

Objetivo de accesibilidadTexto blanco (#FFFFFF)

Encuadre de visualización

60 FPS sincronizados por GPU4 Capas radiales apiladas (SRGB)

/* Modern CSS Mesh Gradient (SRGB) */
:root {
  --mesh-base: #0d0b1a;
  --mesh-point-1: rgba(99, 102, 241, 0.90);
  --mesh-point-2: rgba(6, 182, 212, 0.85);
  --mesh-point-3: rgba(236, 72, 153, 0.80);
  --mesh-point-4: rgba(139, 92, 246, 0.90);
}

.mesh-container {
  background-color: var(--mesh-base);
  background-image:
    radial-gradient(at 15% 20%, rgba(99, 102, 241, 0.90) 0px, transparent 75%),
    radial-gradient(at 80% 15%, rgba(6, 182, 212, 0.85) 0px, transparent 85%),
    radial-gradient(at 30% 85%, rgba(236, 72, 153, 0.80) 0px, transparent 90%),
    radial-gradient(at 85% 80%, rgba(139, 92, 246, 0.90) 0px, transparent 70%);
}

Tamaño del código CSS: 644 bytesCalificación WCAG 2.1:Aviso técnico

Generador de Gradientes Mesh CSS & SVG

Procesamiento en el navegador

Privacidad sin transferencias al servidor

Exportación lista para producción

Generador de Mesh Gradient CSS & SVG — Guía de referencia

Parámetros clave y controles

Consejos profesionales y mejores prácticas

Problemas comunes y soluciones

⚠️Aparición de bandas de color visibles y anillos de contorno pixelados en las transiciones del gradiente

⚠️Uso elevado de CPU o tirones visuales (stuttering) en móviles al reproducir mallas animadas

⚠️El filtro del gradiente SVG genera pantallas negras o recortes en Safari para iOS

⚠️El compilador de Tailwind CSS arroja un error de sintaxis con valores arbitrarios de radial-gradient

Preguntas frecuentes (FAQ)

Herramientas y utilidades relacionadas