La versión corta
- 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.
En esta página
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.
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.
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-gradientcentrado en una posición conat x% y%, que se desvanece atransparent. 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.
- 5
Añade grano
Una capa ligera de ruido oculta las rayas y da profundidad. Los degradados granulados muestran el código.
.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%);
}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 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.
Las palabras puestas directamente sobre una zona recargada de la malla pelean con el color.
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 |
| 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 |
| 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 |
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 y añade un acento contrastado en un único charco.
GR·FVZ6·KW
Thin Dune
Ver este MarkSi 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
