# Superposición de degradado: tiñe fotos sin ocultarlas [Canonical HTML page](https://gradiently.design/es/guide/gradient-overlay) Una buena superposición cambia el ambiente de una foto y da a tus palabras un sitio donde apoyarse, mientras la imagen sigue viéndose. Una mala convierte cada imagen en el mismo rectángulo turbio. Así se distinguen. ## The short version - Una superposición de degradado es una capa de color que se desvanece a lo largo de una foto, usada para teñirla, crear ambiente o dar una zona más tranquila al texto. - La superposición más habitual es un scrim: transparente en un borde y oscuro en el otro, de modo que solo se oscurece la parte de la foto que queda detrás de las palabras. - Una superposición de lavado de color usa los colores de marca con opacidad parcial, a menudo con un modo de fusión como multiplicar, trama o color, para que la foto conserve su detalle. - Las superposiciones funcionan mejor cuando cubren solo la zona que necesita ayuda, en lugar de oscurecer toda la imagen por igual. - Si un scrim tiene que pasar de alrededor del 80 por ciento de opacidad en su borde más oscuro para que el texto se lea, elige una foto más tranquila o mueve las palabras. Una **superposición de degradado** es una capa de color que se desvanece a lo largo de una foto, colocada encima para teñirla, unificar una serie de imágenes o hacer legible un titular. El truco es que se desvanece: una parte de la foto se toca mucho y el resto apenas nada. Por eso una superposición de degradado parece pensada mientras que una caja negra plana al 50 por ciento parece un parche. Tú eliges dónde cae el color, qué intensidad alcanza y cómo se mezcla con la imagen de debajo. ## Cuatro tipos de superposición de degradado Casi todas las superposiciones que ves en una web, un cartel o un post son de uno de estos cuatro tipos. Saber cuál necesitas ahorra mucho tiempo peleando con los reguladores de opacidad. | Superposición | Qué hace | Úsala para | | --- | --- | --- | | Scrim | De transparente a oscuro a lo largo de un borde | Titulares y pies de foto sobre fotos recargadas | | Lavado de color | Colores de marca con intensidad parcial sobre toda la imagen | Hacer que fotos sin relación parezcan una serie | | Duotono o mapa de degradado | Sustituye los colores de la foto por dos o más de los tuyos | Looks fuertes y gráficos; consulta [el efecto duotono](https://gradiently.design/es/guide/duotone-effect) | | Viñeta | Oscurece las esquinas con un desvanecido radial | Llevar la mirada al centro | Las cuatro familias de superposición. La mayoría de los diseños necesitan solo una, no las cuatro. ## El scrim: una superposición para el texto El scrim es el caballo de batalla. Empieza totalmente transparente y se oscurece hacia el borde donde van tus palabras, normalmente abajo o a la izquierda. La foto queda intacta donde está el protagonista y el texto obtiene una base oscura y tranquila. Usa un tono oscuro de la propia foto en vez de negro puro: un marrón profundo sobre un interior cálido, un azul marino sobre un paisaje marino. El negro puro parece un borrón. - Scrim inferior, azul marino: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)` - Scrim izquierdo, marrón cálido: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)` - Viñeta: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)` Tres superposiciones solas, antes de poner ninguna foto debajo. Cada una queda despejada donde iría el protagonista. El 40 por ciento superior del scrim inferior es totalmente transparente, lo que mantiene luminosos los rostros y los productos. La oscuridad crece en la mitad inferior y alcanza su máximo justo en el borde, exactamente donde va un pie de foto. Para más formas de mantener legibles las palabras sobre imágenes, lee [texto legible sobre fotos](https://gradiently.design/es/guide/readable-text-on-photos). ## Lavados de color y modos de fusión Un lavado de color es la forma en que las marcas consiguen que fotos de stock, fotos del móvil e imágenes de eventos parezcan de la misma familia. Coloca un degradado de dos colores de marca sobre la foto y cambia su modo de fusión. El modo de fusión decide cómo se mezcla el color con la imagen, y pesa más que los propios colores. | Modo de fusión | Efecto en la foto | Va bien con | | --- | --- | --- | | Normal | Cubre la foto con la opacidad que fijes | Scrims detrás del texto | | Multiplicar | Oscurece y tiñe; los blancos toman el color de la superposición | Fotos claras y luminosas | | Trama | Aclara y tiñe; los negros toman el color de la superposición | Fotos oscuras y con ambiente | | Color | Conserva las luces y sombras de la foto y cambia sus tonos | Un tinte de marca único y fuerte | | Luz suave | Contraste y tinte suaves | Lavados sutiles en retratos | Los modos de fusión tienen nombres equivalentes en CSS, Figma, Photoshop y la mayoría de las herramientas de diseño. Lavado de violeta a coral: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)` Un lavado de tres colores con opacidad decreciente. En modo multiplicar sobre una foto pálida, se lee como un atardecer violeta cálido; en modo trama sobre una oscura, brilla. ## Cómo añadir una superposición de degradado a una foto 1. **Decide para qué es la superposición** Texto, ambiente o coherencia. Un scrim para el texto, un lavado para el ambiente y la coherencia. Si no sabes decir cuál, probablemente no la necesitas. 2. **Toma un tono oscuro de la foto** Elige el color más profundo que ya tenga la imagen para un scrim, o dos colores de marca para un lavado. 3. **Dibuja el degradado sobre la zona que lo necesita** Empieza transparente sobre el protagonista y crece hacia el borde con las palabras. Mantén el desvanecido largo para que no se vea ninguna línea. 4. **Elige un modo de fusión** Normal para los scrims, multiplicar para fotos claras, trama para las oscuras y color para un tinte único. 5. **Baja la opacidad hasta que casi desaparezca** Luego súbela un paso. Las mejores superposiciones solo se notan cuando las desactivas. 6. **Revisa el texto a tamaño móvil** Reduce el diseño al tamaño al que se verá y lee cada palabra. Un contraste que funciona en un monitor puede fallar en un móvil; [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) tiene los objetivos a los que apuntar. ## Qué oscuridad debe tener una superposición de degradado ### Oculta la foto - Una capa negra plana al 50 por ciento sobre todo - La misma superposición en cada imagen, sea cual sea la luz - Negro o gris puros que apagan la piel y la comida - Un borde duro donde termina el degradado - Una superposición tan fuerte que la foto podría ser cualquier cosa ### Tiñe la foto - Transparente sobre el protagonista, más oscura solo tras el texto - Intensidad ajustada a cada foto - Un tono oscuro tomado de la imagen o de la marca - Un desvanecido largo y gradual, sin línea - La foto sigue reconociéndose de un vistazo Como límite práctico, si el borde más oscuro de un scrim tiene que pasar de alrededor del 80 por ciento para que el texto se lea, la foto está demasiado recargada en ese punto. Mueve las palabras, recorta de otra forma o elige una imagen más tranquila. Un lavado sobre toda la imagen necesita mucho menos, o la foto deja de parecer una foto. ## Superposiciones de degradado en una web En la web puedes apilar la superposición y la foto en una sola declaración, lo que las mantiene juntas cuando cambia la imagen. La superposición va primero porque CSS pinta la primera capa encima. El conjunto completo de técnicas, incluidos los modos de fusión y los pseudoelementos, está en [superposición de degradado en CSS](https://gradiently.design/es/guide/css-gradient-overlay). ```css .hero { min-height: 70vh; background-image: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%), url("/images/harbour.jpg"); background-size: cover; background-position: center; color: #ffffff; } ``` Un scrim inferior sobre una foto de hero. Cambia la imagen y la superposición se mantiene. ## Un lavado que encaja con tu marca siempre Las superposiciones se desvían cuando cada diseñador elige sus propios colores. En el Studio de Gradiently, las fotos pueden teñirse con los colores de tu Mark en mono, duotono o lavado, así que imágenes de fuentes distintas comparten una paleta sin igualarlas a mano. Y cuando las palabras van sobre un Mark en lugar de sobre una foto, este calma por sí solo la zona que tienen detrás, sin ninguna superposición. Lee [fotos en duotono con los colores de tu Mark](https://gradiently.design/es/guide/photo-duotone-in-mark-colours) para ver cómo funciona el lavado. Un post inmobiliario en el que el titular Recién publicado queda sobre la parte más recargada del fondo Sin ayuda, el color más recargado atraviesa el titular. El mismo post inmobiliario con una zona más tranquila y profunda detrás del titular, de modo que se lee cada línea Con el Mark respondiendo, la zona detrás de las palabras se calma, el trabajo que suele hacer un scrim. ## FAQ ### ¿Qué es una superposición de degradado? Una capa de color que se desvanece a lo largo de una imagen, colocada encima para teñirla, crear ambiente o facilitar la lectura del texto. Se diferencia de una superposición plana en que su intensidad cambia a lo largo de la imagen. ### ¿Qué opacidad debe tener una superposición sobre una foto? La mínima que haga legible el texto: a menudo del 50 al 80 por ciento en el borde más oscuro de un scrim, y mucho menos para un lavado sobre toda la foto. Si necesitas más, probablemente la foto está demasiado recargada en ese punto. ### ¿Qué modo de fusión es mejor para una superposición de color? Multiplicar va bien con fotos claras, trama con las oscuras, y color cambia los tonos de la foto conservando sus luces y sombras. Usa normal para los scrims detrás del texto. ### ¿Debo usar negro en una superposición de degradado? Normalmente no. Un tono profundo tomado de la foto, como un azul marino o un marrón oscuro, oscurece la imagen sin que parezca apagada. ### ¿Cómo añado una superposición de degradado en CSS? Pon primero el degradado y después la imagen en `background-image`, por ejemplo `linear-gradient(...), url(photo.jpg)`. La primera capa se pinta encima.