# Texturas de fondo: grano, papel, tela y cristal [Canonical HTML page](https://gradiently.design/es/guide/background-texture) La textura es lo que hace que un color plano de pantalla se sienta como una superficie. Usada con delicadeza, da calidez y oculta el banding; usada con fuerza, se convierte en ruido. Así se encuentra el límite. ## The short version - Una textura de fondo es un detalle fino de superficie, como grano, fibra de papel, tela tejida o cristal esmerilado, superpuesto a un color o a un degradado. - La textura funciona mejor con poca intensidad, que se sienta más que se vea, para que dé calidez sin competir con el contenido que lleva encima. - La escala de la textura debe ir con el tamaño de visualización: grano fino para pantallas pequeñas y visión de cerca, textura más gruesa para formatos grandes vistos desde más lejos. - Superponer grano a un degradado oculta el banding, porque el detalle aleatorio rompe los escalones visibles entre tonos. - Las plataformas sociales y los codificadores de vídeo vuelven a comprimir las imágenes, lo que puede difuminar una textura muy fina, así que comprueba la textura después de subirla. Una **textura de fondo** es un detalle fino de superficie superpuesto a un color o a un degradado: el moteado del grano de película, las fibras del papel, la trama del lino, la escarcha del cristal. Es lo que hace que un fondo se lea como un material y no como píxeles. La regla que más importa es la intensidad. Una textura que sientes más que notas hace un diseño más cálido y de aspecto más caro; una textura que notas primero se convierte en el protagonista y pelea con todo lo que lleva encima. Un post vertical con el titular Mañanas lentas, buen café sobre un degradado de textura suave Un degradado con textura en un post vertical: la superficie se lee como un material y las palabras siguen mandando. ## Tipos de textura de fondo | Textura | Se siente como | Ideal para | | --- | --- | --- | | Grano o ruido | Película, impresión, un acabado mate | Degradados, fondos oscuros, todo lo que muestra banding | | Papel | Impreso, artesanal, editorial | Citas, diarios, invitaciones, marcas serenas | | Tela y lino | Suave, tejido, táctil | Moda, interiorismo, hostelería | | Cristal esmerilado | Moderno, en capas, luminoso | Interfaces, tarjetas sobre color, marcas de tecnología | | Semitono y puntos riso | Impresión retro, fanzines, pósteres | Posts sociales juguetones y editoriales | | Piedra y hormigón | Sólido, arquitectónico, silencioso | Lujo, arquitectura, fotografía de producto | Familias de textura habituales y las asociaciones que traen. Elige una por diseño. Cada textura trae una asociación. El grano dice película e impresión, el papel dice artesanal, el cristal dice interfaz. Elige la que encaje con lo que tu marca debe transmitir y úsala en todas partes; mezclar papel en un post y cristal en el siguiente deshace el efecto. Si aún no has decidido la sensación, la [personalidad de marca](https://gradiently.design/es/guide/brand-personality) tiene una forma sencilla de decidir. ## Escala: adaptar la textura al tamaño de visualización La textura se lee distinto a distintos tamaños. Una pantalla de móvil sostenida de cerca muestra cada mota, así que basta un grano fino. Un póster al otro lado de una sala o una diapositiva en un proyector necesita una textura más gruesa para notarse siquiera. Y una textura que queda bien en un post de 1080×1350 puede desaparecer cuando una plataforma lo reduce a una miniatura, o convertirse en manchas cuando se vuelve a comprimir. - Historia 1080×1920: fina: 1080 × 1920 - Post 1080×1350: fina: 1080 × 1350 - Diapositiva 1920×1080: media: 1920 × 1080 - Impresión A3 3508×4961: gruesa: 3508 × 4961 La misma textura necesita una escala distinta para cada formato y distancia de visión. En impresión, el grano suele sobrevivir bien e incluso ayuda a que los degradados suaves se reproduzcan limpios; la [impresión de degradados](https://gradiently.design/es/guide/print-gradients) cubre los detalles. ## Superponer textura a los degradados La combinación más útil es la textura sobre un degradado. El grano rompe los escalones visibles que aparecen en las mezclas suaves, lo que se llama banding, y hace que un degradado digital parezca impreso. El método habitual es colocar la textura como una capa aparte encima del color y fundirla con un modo como Superponer o Luz suave con poca opacidad, para que sombree el color en lugar de taparlo. 1. **Empieza por el color** Acierta primero con el degradado. La textura no salvará unos colores que no combinan. 2. **Añade una capa de textura** Colócala encima del degradado. Usa una textura gris o neutra para que no tiña el color. 3. **Fúndela** Pon la capa en Superponer o en Luz suave. La Luz suave es más delicada y mantiene limpios los colores. 4. **Baja la intensidad** Reduce la opacidad hasta que solo notes la textura cuando la busques, a menudo muy por debajo de la mitad. 5. **Comprueba la zona más oscura** El banding se esconde en los fundidos oscuros y lentos. Asegúrate de que la textura ha disuelto ahí cualquier escalón. En la web, el mismo enfoque son unas pocas líneas de código; mira la [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture). Para saber por qué el grano en particular queda tan bien en los degradados, lee los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients). ## Textura y legibilidad ### Evita - Una textura fuerte justo detrás de texto pequeño - Patrones de alto contraste, como una trama marcada de lino bajo el texto del cuerpo - Dos o tres texturas distintas en un diseño - Una textura tan fina que se convierte en papilla al subirla ### Haz - Una textura tenue, o una zona más tranquila donde vayan las palabras - Una textura de bajo contraste en tonos cercanos de un color - Una sola familia de textura en todos los formatos - Comprueba la versión subida, no solo la exportación La textura añade ruido visual cerca de las letras, y el texto pequeño es el primero en sufrirlo. Mantén la textura tenue donde vaya el texto, o da a las palabras una región del fondo tranquila y uniforme. El [texto sobre fondos recargados](https://gradiently.design/es/guide/type-on-busy-backgrounds) cubre las técnicas al detalle. Un post cuadrado con una cita en el que el fondo con textura sigue igual detrás del texto La textura y el color pasan de largo justo por detrás de las palabras… El mismo post cuadrado con la cita y el fondo más tranquilo y con más contraste detrás del texto …y el mismo fondo dejando un sitio tranquilo detrás de ellas. ## Una textura que se mantiene coherente La textura es fácil de perder entre herramientas: una capa de grano en un archivo, una imagen de papel en otro, una intensidad distinta en cada exportación. En Gradiently, la textura forma parte del propio fondo. Un Mark apila hasta tres materiales con grano y luz, así que la misma superficie se dibuja detrás de cada diseño en cada tamaño, y su región más tranquila se mueve detrás de las palabras. Un Mark: color, material y grano dibujados juntos, idénticos en todos los formatos. ## FAQ ### ¿Qué es una textura de fondo? Un detalle fino de superficie, como grano, fibra de papel, trama de tela o cristal esmerilado, superpuesto a un color o a un degradado para que se lea como un material físico. ### ¿Qué intensidad debe tener una textura de fondo? Tenue. Solo debes notarla cuando la buscas. Si la textura es lo primero que ves, reduce su opacidad. ### ¿Arregla el banding de un degradado añadir textura? Normalmente lo hace el grano. El detalle fino aleatorio rompe los escalones visibles entre tonos para que la transición se vea lisa. ### ¿Qué modo de fusión debo usar para la textura? Luz suave para un efecto delicado que mantiene limpios los colores, o Superponer para uno más fuerte. Usa una textura de gris neutro para que no tiña el color. ### ¿Por qué mi textura se ve con manchas en las redes sociales? Las plataformas vuelven a comprimir lo que subes, lo que puede difuminar una textura muy fina. Usa una textura algo más gruesa y comprueba el resultado subido.