Mejora la Legibilidad: Crea un Fondo Desvanecido (Faded Background) con CSS

Una de las reglas del diseño web es la legibilidad. Cuando colocamos texto brillante (como el blanco) directamente sobre una imagen de fondo, a menudo encontramos que el contraste es insuficiente, especialmente si la imagen es muy clara o contiene muchos detalles. El resultado es un texto que “se pierde”.

La solución más eficiente es aplicar un gradiente lineal que funcione como una capa de sombreado (overlay) transparente, asegurando que el texto se mantenga claro sobre el área oscura.

La Técnica: Gradiente Transparente y el Poder del background

En lugar de añadir un elemento <div> extra en tu HTML para crear un sombreado, CSS nos permite superponer el gradiente directamente sobre la imagen de fondo utilizando la misma propiedad background.

1. Entendiendo el Objetivo

Queremos que la imagen se vea más oscura en el área donde se encuentra el texto (típicamente a la izquierda), y que se aclare gradualmente hasta su estado original en el lado opuesto (la derecha).

• Punto de Inicio (Izquierda): Sombreado oscuro (ej. negro al 50% de opacidad).
• Punto Final (Derecha): Totalmente transparente (negro al 0% de opacidad).

2. El Código

Para el siguiente código HTML:

<div class="section">
    <h1>Hello World</h1>
</div>

Utilizamos la notación de color rgba() o la moderna rgb() con barra, donde el último valor es el canal alfa (opacidad), para definir los puntos de color.

.section {
    height: 300px;
    
    background: linear-gradient(
        to right,
        rgb(0 0 0 / 0.5), 
        rgb(0 0 0 / 0)
    ), 
    /* La URL de la imagen de fondo */
    url('background.jpg');

    /* Propiedades adicionales para la imagen */
    background-size: cover;
    background-position: center;
}

.section h1 {
    color: white;
}

Antes

Después

3. Explicación

Cuando defines múltiples valores para la propiedad background, CSS los apila en capas.

1. Capa Superior (linear-gradient(...)): Esta capa va primero y es visible. Se desvanece del negro semi-transparente (garantizando el contraste) a la transparencia total.
2. Capa Inferior (url('background.jpg')): La imagen original.

El resultado es un área oscura sobre la imagen donde el texto se asienta cómodamente, lo que facilita la lectura sin sacrificar la calidad o el detalle de la imagen en el resto del espacio. Esta técnica es fundamental para hero banners y secciones de encabezado.