La versión corta
- La textura en un degradado es cualquier detalle de superficie sobre una mezcla de color, como grano, fibra de papel, cristal o un brillo de seda, que hace que se lea como un material.
- Cada familia de textura trae sus propias asociaciones: el grano sugiere película e impresión, el papel sugiere artesanía, el cristal sugiere tecnología y la seda sugiere lujo.
- La textura cambia el carácter de un degradado más que un cambio de color, y por eso es de lo más difícil de copiar.
- Las texturas se pueden apilar, normalmente como una estructura, como la seda o el estriado, una superficie, como el grano o el papel, y una luz encima.
- La textura debe apartarse de las palabras: más suave detrás del texto, más fuerte en las zonas abiertas.
En esta página
La textura en degradados es la superficie que pones sobre una mezcla de color para que se lea como un material y no como un valor por defecto de pantalla: un grano fino como el de la película, la textura del papel, la claridad y la refracción del cristal o los suaves pliegues de la seda. Los colores dicen qué ambiente quieres; la textura dice de qué está hecha la cosa. Por eso dos degradados con colores idénticos pueden sentirse completamente distintos, y por eso la textura es una de las partes más distintivas de una identidad visual.
Las cuatro familias de textura
| Textura | Cómo se ve | Qué dice | Encaja con |
|---|---|---|---|
| Grano | Fino moteado aleatorio sobre el color | Película, impresión, calidez analógica | Editorial, música, fotografía, la mayoría de las marcas |
| Papel | Fibras suaves y textura, base blanco roto cálido | Artesanía, calma, algo hecho a mano | Papelería, comida, libros, estudios |
| Cristal | Claridad, desenfoque, refracción, brillos nítidos | Tecnología, precisión, profundidad | Apps, software, hardware, finanzas |
| Seda | Pliegues suaves con brillos blandos en movimiento | Lujo, suavidad, sensualidad | Belleza, moda, perfumería, joyería |
Grano: película e impresión
El grano es la textura más versátil y la más fácil de añadir. Una capa fina de ruido monocromo hace que una mezcla parezca fotografiada o impresa, y además oculta las bandas que suelen mostrar los degradados digitales lisos. Funciona con casi cualquier paleta, y por eso se ha convertido en el toque final por defecto. Cuánto usar y cómo está en los degradados granulados.
Papel: artesanía y calma
La textura de papel aporta una base blanco roto cálida, fibras suaves y una ligera irregularidad, como si el degradado se hubiera impreso o pintado. Combina de forma natural con colores pálidos, tintas apagadas y tipografía con serifa. Mantén pequeñas las manchas de color y deja que se vea el papel; un degradado pastel o terroso sobre papel se siente hecho a mano como nunca lo hace un fondo blanco puro. Mira los degradados pastel para paletas que le sientan bien.
Cristal: tecnología y profundidad
Las texturas de cristal son de dos tipos. El cristal esmerilado desenfoca lo que hay detrás, que es la base del glassmorphism. El cristal claro o estriado refracta el color en bandas y añade brillos nítidos donde la luz roza un borde. Ambos sugieren precisión y hardware moderno. La clave es el brillo: una línea fina y clara colocada donde daría la luz, y color más oscuro en todo lo demás.
Seda: lujo y suavidad
La seda y el satén parecen pliegues suaves de tela: sombras amplias y blandas, y brillos estrechos y claros donde la tela gira hacia la luz. En pantalla, eso significa un degradado con bandas de luz nítidas entre tonos más profundos, a menudo en un solo tono. Los colores joya profundos, como vino, esmeralda y medianoche, se leen como ropa de noche; los pálidos, como champán y rubor, se leen como novia o cuidado de la piel. La seda funciona de maravilla a cámara lenta, donde los brillos pueden ir a la deriva.
Cómo apilar texturas
Los materiales reales combinan texturas: la seda tiene un brillo y una trama, y el papel impreso tiene fibras y grano de tinta. Los degradados pueden hacer lo mismo, siempre que cada capa tenga una tarea clara. Un orden fiable es color, luego estructura, luego superficie y luego luz.
- 1
Campo de color
La mezcla en sí: tu degradado, malla o resplandor. Acierta primero con esto; la textura no puede arreglar una paleta turbia.
- 2
Estructura
La forma a gran escala del material: pliegues de seda, estrías de cristal, la suave irregularidad del papel. Cambia cómo fluye el color.
- 3
Superficie
El detalle fino: grano o textura de papel. Cubre todo y hace que la superficie se sienta física.
- 4
Luz
Brillos y sombras que dicen al ojo de dónde viene la luz. Una única fuente de luz coherente hace que todas las capas se lean como un solo objeto.
.silk {
position: relative;
isolation: isolate;
/* colour and structure: satin folds in one hue */
background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}
.silk::after {
/* surface: fine monochrome grain */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
opacity: 0.25;
}Textura y legibilidad
La textura añade detalle, y el detalle detrás de letras pequeñas las hace más difíciles de leer. Mantén la textura más suave detrás del texto y más fuerte en las zonas abiertas, y deja la tipografía y los logotipos por encima de todas las capas de textura para que sus bordes se mantengan nítidos. Los brillos fuertes de seda y los reflejos de cristal son el mayor riesgo, porque crean líneas claras que pueden cortar una palabra. Mira el texto sobre fondos cargados.
La textura a plena fuerza detrás de las palabras: la superficie compite con la frase.
El mismo material relajándose detrás de las palabras: textura donde hay espacio, calma donde hay texto.
La textura como identidad
Los colores se pueden muestrear de una captura de pantalla en segundos. Una textura, y la manera en que se comporta con la luz y el movimiento, es mucho más difícil de reproducir. Eso convierte la textura en una de las formas más potentes de hacer tuyo un degradado. Cada Mark de Gradiently apila hasta tres materiales sobre sus colores, con su propia luz y su propio grano, y la Forge te deja elegirlos control a control.
GR·75X1·NM
February Quay
Ver este MarkPreguntas frecuentes
¿Qué es la textura en un degradado?
Es el detalle de superficie sobre una mezcla de color, como grano, papel, cristal o seda, para que el degradado se lea como un material.
¿Qué textura debo usar en un degradado?
Haz coincidir la textura con aquello de lo que estaría hecha tu marca: grano para película e impresión, papel para artesanía, cristal para tecnología, seda para lujo.
¿Cómo añado textura a un degradado en CSS?
Superpón una imagen de ruido o de patrón sobre el degradado con un modo de fusión como Luz suave o Superposición, con poca opacidad.
¿Se pueden combinar texturas en un mismo degradado?
Sí. Apílalas por tarea: campo de color, luego estructura, como pliegues de seda, luego superficie, como grano, y luego luz.
¿Hace la textura más difícil de leer el texto?
Puede. Mantén la textura más suave detrás de las palabras y el texto por encima de todas las capas de textura.
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
