# Textura en degradados: grano, papel, cristal y seda, explicados

[Canonical HTML page](https://gradiently.design/es/guide/gradient-texture)

Dos degradados con colores idénticos pueden sentirse como un fotograma de película, una tarjeta de imprenta, una pantalla de móvil o un vestido de noche. La diferencia es la textura, y dice más que los colores.

## The short version

- 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.

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 |

Cuatro familias, cuatro voces. Elige la que coincida con aquello de lo que estaría hecha tu marca si fuera un objeto.

## 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](https://gradiently.design/es/guide/grainy-gradients).

## 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](https://gradiently.design/es/guide/pastel-gradients) para paletas que le sientan bien.

- Papel: floración de albaricoque: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Seda: satén vino: `linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%)`
- Cristal: estriado: `repeating-linear-gradient(90deg, #0f3d4c 0px, #1f6f86 14px, #8fd3e8 18px, #1f6f86 22px, #0f3d4c 36px)`
- Cristal: cristal con reflejo: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Bocetos de textura con degradados CSS sencillos. El satén sale de bandas nítidas y brillantes entre pliegues más oscuros; el cristal estriado, de brillos estrechos repetidos; un cristal liso, de un solo reflejo fino.

## 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](https://gradiently.design/es/guide/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.

```css
.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;
}
```

Dos capas apiladas: una estructura de satén en el degradado y una superficie de grano fino mezclada encima con Luz suave.

## 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](https://gradiently.design/es/guide/type-on-busy-backgrounds).

Un post de cita donde el fondo texturizado va a plena fuerza detrás de las palabras

La textura a plena fuerza detrás de las palabras: la superficie compite con la frase.

El mismo post de cita con una zona más calma del fondo texturizado detrás de las palabras

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.

Un Mark son colores más materiales, luz, grano y movimiento. Los materiales son lo que hace que se sienta como un objeto.

## FAQ

### ¿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.