Generador de mesh gradient

Crea mesh gradients con puntos de color arrastrables

Los mesh gradients mezclan muchos colores sobre una superficie con transiciones suaves y orgánicas. Se han convertido en un clásico de los fondos hero, las pantallas de inicio de aplicaciones y las portadas musicales porque resultan más ricos que un simple degradado lineal de dos colores. Este generador de mesh gradient te permite colocar entre tres y seis puntos de color directamente sobre el lienzo, arrastrarlos a su posición y ver cómo la mezcla se actualiza al instante.

Cómo funciona con CSS puro

Los navegadores no admiten mesh gradients reales, pero puedes aproximarlos superponiendo varios fondos radial-gradient(). Cada capa se centra en uno de tus puntos y se desvanece desde el color del punto hasta una versión totalmente transparente del mismo color, y todas las capas se sitúan sobre un background-color base. Los desvanecimientos superpuestos mezclan los colores con suavidad, lo que produce el efecto mesh. El CSS generado es una única declaración sin imágenes, así que carga al instante y se adapta a cualquier tamaño de elemento.

Desvanecer hacia rgba() con alfa cero, en lugar de usar la palabra clave transparent, evita los bordes grisáceos que pueden aparecer en algunos motores de renderizado y además permite reproducir exactamente el mismo degradado en un canvas HTML para la exportación PNG.

Desenfoque, ruido y paletas

El control de desenfoque añade un filter: blur() de CSS para un aspecto aún más suave, y el control de ruido superpone una textura SVG de ruido fractal que aporta un grano sutil y reduce las bandas de color en superficies grandes. El botón Random palette elige un conjunto armonioso de tonos con saturación y luminosidad equilibradas, y Random layout además reorganiza los puntos. Cuando estés satisfecho, copia el CSS en tu hoja de estilos o descarga un PNG de 1600 por 900 píxeles. Todo se genera localmente en tu navegador y no se sube nada.