# Materiales de degradado: seda, aurora, grano y los demás [Canonical HTML page](https://gradiently.design/es/guide/mark-materials-explained) Dos Marks pueden compartir paleta y no parecerse en nada, porque el material decide cómo se comporta el color. Un recorrido por las familias, cómo se combinan capas, luz y grano, y qué transmite cada una. ## The short version - Un material de degradado es la estructura que llena el color: un brillo, un resplandor, un tejido, una piedra, un grano. - Cada Mark de Gradiently se construye con hasta tres capas de material apiladas, una base y hasta dos más mezcladas encima. - Los materiales de Gradiently se agrupan en catorce familias, de Degradado y Luz a Textil, Mineral, Cristal, Metal y Pintura. - La luz, el grano y el movimiento se ajustan dentro de cada capa, así que el mismo material puede ser discreto o espectacular. - Elige un material por lo que sugiere su superficie: grano para lo impreso y artesanal, seda para el lujo, cristal y cromo para la tecnología. Los **materiales de degradado** son lo que hace que un degradado parezca algo y no una simple mezcla entre dos colores. Un material es la estructura que llena el color: un brillo direccional en Seda, cortinas de luz en Aurora, floraciones suaves en Malla, arena en Limo, vetas en el mármol. Cada Mark de Gradiently apila hasta tres de ellos y luego añade luz, grano y movimiento, y por eso dos Marks con la misma paleta pueden no parecerse en nada. ## Qué es un material Piensa en la paleta como la pintura y en el material como la superficie sobre la que se aplica. Vierte el mismo azul marino, turquesa y naranja sobre seda, cristal esmerilado o papel hecho a mano y obtendrás tres objetos distintos. En un Mark, cada material toma los colores de la paleta del propio Mark, así que cambiar el material cambia el carácter sin cambiar los colores. - Seda: un brillo direccional: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)` - Aurora: luz que sube desde un borde: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)` - Malla: floraciones suaves: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)` - Halo: un solo foco de luz: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)` Bocetos en CSS de cuatro materiales con una misma paleta. Los Marks reales renderizan una estructura mucho más rica, pero incluso estos muestran cuánto decide el material. ## Las catorce familias de materiales Gradiently agrupa sus materiales en familias según a qué se parecen. Los nombres de abajo son materiales reales que encontrarás en el [Mercado](/market); cada familia contiene muchos más. | Familia | Qué es | Materiales que encontrarás | | --- | --- | --- | | Degradado | Mezclas, orbes y campos de color | Esquinas, Orbes, Granulado, Perla | | Luz | Resplandores, destellos y haces | Halo, Escenario, Neón, Rayos | | Fluido | Líquidos, tinta y metal | Tinta, Mercurio, Vertido, Lava | | Atmósfera | Niebla, nubes y cielo | Bruma, Ocaso, Cúmulo, Bruma del lago | | Cosmos | Gas, estrellas y espacio profundo | Nebulosa, Galaxia, Vía Láctea, Eclipse | | Orgánico | Crecimiento, células y pétalos | Células, Coral, Rosa, Helecho | | Mineral | Piedra, mármol y arena | Veta, Limo, Ágata, Travertino | | Textil | Seda, tejido y punto | Seda, Lino, Terciopelo, Satén | | Cristal | Escarcha, prisma y agua | Esmerilado, Prisma, Acanalado, Vidriera | | Geométrico | Líneas, puntos y teselas | Semitono, Arcos, Cuadrícula, Truchet | | Grano | Papel, impresión y película | Fibra, Riso, Película, Tramado | | Metal | Cepillado, anodizado y fundido | Metal cepillado, Anodizado, Metal fundido, Pátina | | Pintura | Óleo, gouache y pincel | Empaste, Gouache, Acrílico, Pintura en aerosol | | Digital | Pantallas, interferencias y píxeles | Pantalla CRT, Interferencia, Orden de píxeles, Muro LED | Las familias tal como las nombra Gradiently. Grano es una familia propia y también un ajuste dentro de cada capa. ### Seda, aurora y malla Estos tres son por los que más pregunta la gente. **Seda** es un brillo direccional sobre hilos finos: elegante, algo formal, en su salsa con la belleza y la moda. **Aurora** son cortinas de luz que suben desde un borde brillante hacia un cielo oscuro, espectacular sobre un fondo vacío. **Malla** son floraciones suaves de color que se funden entre sí, el degradado moderno clásico, amable y versátil. [Degradados seda](https://gradiently.design/es/guide/silk-gradient), [degradados aurora](https://gradiently.design/es/guide/aurora-gradients) y [degradados de malla](https://gradiently.design/es/guide/mesh-gradients) tienen cada uno su propia guía con CSS. ### Grano, papel e impresión La familia Grano hace que una pantalla parezca impresa. **Fibra** es papel hecho a mano con fibras largas y alguna mota, **Riso** es una impresión a dos tintas, **Película** es grano de película y **Tramado** escalona el color en píxeles. Van bien con comida, artesanía, libros y todo lo que deba parecer hecho a mano. Además ocultan las bandas, las franjas que aparecen en los degradados suaves, como explica [degradados con grano](https://gradiently.design/es/guide/grainy-gradients). ## Cómo se apilan las capas Un Mark tiene una capa base y hasta dos más encima. Cada capa superior tiene su propia opacidad y un modo de fusión (normal, trama, multiplicar, superponer o suave), la misma idea que las capas de un editor de fotos. Una receta habitual es una base amplia como Malla o Bruma para el campo de color, una capa estructural como Lino o Semitono para la textura y una capa de luz como Halo o Fuga para el foco. ```css .card { background: /* top layer: a light, screened over the rest */ radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%), /* middle layer: a fine stripe for texture */ repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px), /* base layer: the colour field */ linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%); background-blend-mode: screen, overlay, normal; } ``` Tres capas apiladas en CSS, de arriba abajo: la misma estructura de base, textura y luz que usa un Mark, en su forma más sencilla. ## Luz, grano y movimiento Dentro de cada capa, unos pocos ajustes cambian cómo se comporta el material: su escala, cuánto se deforma, cuánto detalle fino muestra, con qué intensidad se ilumina, cuánto grano lleva encima y cuánto se mueve. La misma Seda puede ser un brillo apretado e intenso o una caída amplia y tenue. El movimiento se comparte en todo el Mark, con su propia velocidad y deriva, así que las capas se mueven juntas y no unas contra otras. Un diseño vertical tranquilo con un degradado suave y amplio y una sola palabra, Calma Un Mark tranquilo: la estructura amplia y la luz suave dejan mucho sitio para las palabras. Un diseño vertical intenso con una textura detallada y brillante y una sola palabra, Energía Un Mark más vivo: el detalle más fino y la luz más intensa van bien con lanzamientos y eventos. El detalle y las palabras compiten, por eso los Marks calman por sí solos el detalle cargado cerca del texto. Un Mark sabe dónde están las palabras: su zona más tranquila se coloca detrás del texto y los colores cerca de las letras se oscurecen o se aclaran, así que incluso un material con textura mantiene legible tu titular. ## Cómo elegir un material ### Tranquilo, para el día a día - Malla, Bruma, Limo, Lino, Fibra - Formas amplias, poco detalle - Cómodo detrás de titulares largos - Bueno para posts diarios y cartas ### Llamativo, para ocasiones - Aurora, Neón, Cromo, Interferencia, Lámina holográfica - Luz intensa, estructura fina - Mejor con muy pocas palabras - Bueno para lanzamientos, eventos, portadas Pregúntate de qué está hecha tu marca. Una panadería es harina, papel y luz cálida, así que Fibra o Aguada. Un estudio que vende software es cristal y luz limpia, así que Esmerilado o Prisma. Después pregúntate con qué frecuencia vas a publicar sobre él: cuanto más a menudo, más tranquilo debería ser. [Cómo elegir el Mark adecuado](https://gradiently.design/es/guide/pick-the-right-mark) recorre el resto de la decisión, y el Mercado te permite filtrar directamente por material. ## FAQ ### ¿Qué es un material de degradado? La estructura que llenan los colores de un degradado, como un brillo, un resplandor, un tejido o una piedra. Decide si el color se lee como seda, cristal, papel o luz. ### ¿Cuántas capas puede tener un Mark? Hasta tres: una capa base y hasta dos más encima, cada una con su propia opacidad y modo de fusión. ### ¿Qué diferencia hay entre seda y aurora? La seda es un brillo direccional sobre hilos finos. La aurora son cortinas de luz que suben desde un borde brillante hacia un cielo oscuro. ### ¿El grano hace que el texto sea más difícil de leer? Un poco de grano rara vez lo hace, y oculta las bandas. Además, los Marks calman el detalle cargado detrás de las palabras, así que el texto sigue siendo legible. ### ¿Puedo buscar en el Mercado por material? Sí. El Mercado se puede filtrar por material, además de por color, fondo, ambiente y estilo, y se puede buscar con palabras como «seda azul».