⚏

Generador de Mesh Gradient

Gradientes abstractos interactivos con arrastre

Diseña mesh gradients sofisticados arrastrando puntos de color en un canvas interactivo. Apila gradientes radiales para crear fondos fluidos y abstractos, y exporta reglas CSS background-image listas para producción al instante.

CSS

background-color: #0a0d12;
background-image:
  radial-gradient(circle at 20% 15%, #ff6b6b 0%, transparent 60%),
  radial-gradient(circle at 80% 25%, #00d9ff 0%, transparent 70%),
  radial-gradient(circle at 30% 75%, #c792ea 0%, transparent 55%),
  radial-gradient(circle at 75% 80%, #f0b429 0%, transparent 65%);

// guía rápida

Un mesh gradient (gradiente de malla) es un fondo multicolor donde los colores se mezclan de forma fluida a través de múltiples puntos de coordenadas. Mientras que los gradientes tradicionales fluyen en línea recta o circular, los mesh gradients te permiten arrastrar nodos para crear patrones de diseño abstractos, orgánicos y dinámicos.

Cómo usar esta herramienta:

Haz clic en los controladores del lienzo y arrástralos para colocar los nodos de color.
Haz clic en un controlador y usa el selector de color para cambiar el color de ese nodo específico.
Ajusta la opacidad y las propiedades de mezcla para suavizar las transiciones de color.
Copia la declaración CSS background-image generada, la cual utiliza múltiples gradientes radiales apilados para lograr el efecto de mezcla orgánica.

// preguntas frecuentes

¿Cómo genera la herramienta gradientes de malla en CSS?

El CSS puro no soporta coordenadas de malla reales. La herramienta simula un mesh gradient creando múltiples gradientes radiales CSS superpuestos posicionados en diferentes porcentajes de coordenadas sobre el lienzo, mezclándolos usando transparencias alfa.

¿Es el CSS generado compatible con todos los navegadores modernos?

Sí. Los gradientes radiales apilados son totalmente compatibles con todos los navegadores modernos. No requiere renderizado pesado de canvas ni imágenes externas.

¿Puedo usar estos gradientes como fondos de página?

Sí. Copia la declaración <code>background-image</code> generada y aplícala a cualquier elemento de bloque en tu hoja de estilos para usarlo como un fondo moderno y fluido.