# Degradados de malla: qué son y cómo crear uno [Canonical HTML page](https://gradiently.design/es/guide/mesh-gradients) Los degradados de malla son esos campos de color suaves y a la deriva que hay detrás de media docena de páginas de lanzamiento de este año. Así funcionan, cómo construir uno a mano y los dos errores que arruinan a casi todos. ## The short version - Un degradado de malla es un degradado donde varios puntos de color se mezclan entre sí en dos dimensiones, en lugar de a lo largo de una línea o desde un centro. - Los degradados de malla parecen orgánicos porque no tienen una única dirección, así que se leen como luz, agua o pintura y no como geometría. - CSS no tiene un tipo de degradado de malla, pero apilar degradados radiales suaves sobre un color base oscuro o claro da un resultado convincente. - Los dos fallos habituales son el barro, cuando colores opuestos se encuentran y se vuelven grises, y el banding, cuando las mezclas sutiles se rompen en rayas. - Tres a cinco colores de una familia afín, un color base y un poco de grano bastan para la mayoría de los degradados de malla. Un **degradado de malla** es un degradado formado por varios puntos de color repartidos por una superficie, cada uno mezclándose con sus vecinos en todas las direcciones a la vez. Un degradado lineal avanza a lo largo de una línea y uno radial se expande desde un centro; una malla no tiene un único camino, así que el color se acumula, se desplaza y se solapa como la luz a través del agua. Por eso los degradados de malla se sienten orgánicos y se han convertido en el aspecto por defecto de cabeceras, fondos de pantalla y portadas de álbum. Esta guía explica cómo funciona una malla, cómo crearla en CSS y en herramientas de diseño, y cómo evitar las manchas grises y las rayas que hacen que tantas parezcan baratas. Para las otras formas, consulta los [tipos de degradados](https://gradiently.design/es/guide/types-of-gradients). ## Qué convierte un degradado en una malla En una malla de degradado auténtica, como la de Adobe Illustrator, la superficie se divide en una cuadrícula. Cada punto de la cuadrícula tiene un color y el programa mezcla suavemente entre puntos vecinos, curvando la cuadrícula para orientar el color. Los degradados de forma libre eliminan la cuadrícula y te dejan colocar puntos de color donde quieras. Los degradados de malla de la web y las redes suelen seguir un tercer camino: manchas suaves de color colocadas sobre una base y mezcladas entre sí. Los tres comparten una idea. El color de cada píxel es una mezcla de los puntos de color cercanos, ponderada por su proximidad. Si mueves un punto, solo cambia su vecindad, y eso es lo que permite que una malla parezca hecha a mano y no calculada. - Base nocturna: #0b1026 - Charco violeta: #7c3aed - Charco cielo: #0ea5e9 - Charco turquesa: #14b8a6 - Acento rosa: #f472b6 Una receta de malla: un color base y cuatro puntos de color. El violeta, el cielo y el turquesa están juntos en el círculo cromático, así que sus solapes se mantienen limpios; el rosa es el único acento. ## Por qué los degradados de malla parecen orgánicos ### Lineal o radial - Una dirección o un centro - El ojo sigue la línea o la diana - Parece diseñado y geométrico - Se reconoce fácilmente como un preajuste ### Malla - Varios puntos de color, sin una única dirección - El ojo vaga y descansa - Parece luz, agua o pintura - Cada disposición es ligeramente distinta Esa cualidad errante es también el peligro. Sin estructura, una malla puede parecer un borrón aleatorio. Las buenas tienen composición: una zona brillante donde el ojo aterriza primero, una zona más oscura que le da peso y una zona tranquila donde pueden ir las palabras. ## Cómo crear un degradado de malla en CSS 1. **Fija un color base** Elige un fondo oscuro o claro. Se ve donde los charcos de color se desvanecen, así que decide el ambiente general. 2. **Coloca de tres a cinco charcos de color** Cada charco es un `radial-gradient` centrado en una posición con `at x% y%`, que se desvanece a `transparent`. Ponlos cerca de esquinas y bordes, no en el centro. 3. **Deja que se solapen** Desvanece cada charco entre el 45 % y el 60 % del recorrido para que los vecinos se encuentren. Los solapes son donde la malla gana riqueza. 4. **Deja una zona tranquila** Mantén un área mayormente en el color base, normalmente donde irá tu titular. Consulta el [texto sobre degradado](https://gradiently.design/es/guide/text-on-gradient). 5. **Añade grano** Una capa ligera de ruido oculta las rayas y da profundidad. Los [degradados granulados](https://gradiently.design/es/guide/grainy-gradients) muestran el código. ```css .mesh { background-color: #0b1026; background-image: radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%), radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%), radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%), radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%); } ``` La paleta anterior como malla CSS. La primera capa de la lista se pinta encima, así que pon primero tu color más fuerte. Como los charcos son porcentajes, la malla se reescala con su caja. En formas muy distintas, como una historia vertical y un banner ancho, ajusta las posiciones `at` para que la zona brillante siga cayendo donde quieres. La misma paleta puede animarse despacio moviendo esas posiciones; los [fondos de degradado animado](https://gradiently.design/es/guide/animated-gradient-background) explican cómo hacerlo sin perjudicar el rendimiento. ## Crear un degradado de malla en herramientas de diseño En las herramientas con una malla o un degradado de forma libre reales, coloca tus puntos de color directamente y arrástralos hasta que la composición funcione. En las que no la tienen, el método del desenfoque sirve en todas partes: dibuja de tres a cinco formas suaves con tus colores sobre un rectángulo base, desenfócalas mucho, a menudo un cuarto del ancho del lienzo o más, y deja que se solapen. Después añade una capa de grano encima y exporta al tamaño final en lugar de ampliar. Una publicación vertical cuyo titular está sobre una zona brillante y recargada de un degradado de malla Las palabras puestas directamente sobre una zona recargada de la malla pelean con el color. La misma publicación vertical con una zona más calmada y oscura de la malla detrás del titular La misma malla con una zona tranquila detrás de las palabras se lee de un vistazo. ## Errores de los degradados de malla y cómo arreglarlos | Problema | Por qué ocurre | Solución | | --- | --- | --- | | Manchas grises o marrones | Colores opuestos, como naranja y azul, se encuentran y se anulan | Mantén los charcos vecinos cerca en tono, o separa los opuestos con un tercer color. Consulta los [degradados apagados y turbios](https://gradiently.design/es/guide/muddy-gradients) | | Rayas visibles | Mezclas grandes y sutiles saltan entre los tonos que una pantalla puede mostrar | Añade grano y evita la compresión JPEG fuerte. Consulta el [banding en degradados](https://gradiently.design/es/guide/gradient-banding) | | Una mancha en el centro | Los charcos centrados en el lienzo parecen una diana | Empuja los charcos hacia los bordes y las esquinas | | Ruido de arcoíris | Demasiados colores sin relación | Tres a cinco colores de una familia más un acento | | Sin sitio para las palabras | El color repartido por igual por toda la superficie | Planifica una zona tranquila antes de colocar los charcos | Casi todos los degradados de malla flojos tienen uno de estos cinco problemas. Una malla es tan buena como su paleta. Si no sabes qué colores se mezclarán limpiamente, empieza con una familia de [colores análogos](https://gradiently.design/es/guide/analogous-colors) y añade un acento contrastado en un único charco. Un Mark es un degradado de malla bien terminado: charcos equilibrados, material, grano y luz, renderizados en vivo para cada tamaño en el que diseñes. Si prefieres describir una malla en lugar de construirla, la Forge crea Marks nuevos a partir de una frase o control a control, con hasta ocho colores y tres materiales apilados. ## FAQ ### ¿Qué es un degradado de malla? Un degradado de malla mezcla varios puntos de color por una superficie en dos dimensiones, de modo que el color se acumula y se solapa de forma orgánica en lugar de seguir una línea o un centro. ### ¿Se puede hacer un degradado de malla en CSS? Sí, por aproximación. Apila de tres a cinco capas `radial-gradient`, cada una desvaneciéndose a transparente, sobre un color de fondo base. ### ¿Cuántos colores debe tener un degradado de malla? Lo normal es que funcionen mejor de tres a cinco colores más una base. Más que eso suele parecer ruido de arcoíris en lugar de un campo compuesto. ### ¿Por qué mi degradado de malla se ve turbio? Colores opuestos se están encontrando y mezclando hacia el gris. Mantén los colores vecinos cerca en tono o pon un color puente entre los opuestos. ### ¿Qué diferencia hay entre un degradado de malla y uno de forma libre? Una malla de degradado clásica guarda los colores en una cuadrícula de puntos que puedes curvar. Un degradado de forma libre te deja colocar puntos de color donde quieras sin cuadrícula. Ambos mezclan en dos dimensiones.