CSS: adicione uma camada de gradiente (sombra escura) às imagens de fundo para tornar o texto legível

Por vezes, o texto ou a legenda sobre uma imagem não se lê bem, consoante o contraste de cor entre o elemento em primeiro plano e o fundo. Eu costumava editar a imagem para a escurecer ou clarear, de modo a que o texto HTML se destacasse e fosse legível para os utilizadores, mas aqui está uma solução muito mais simples com algumas linhas de CSS!

HTML

Copie o código abaixo e cole-o no seu documento HTML.

<div class="hero-outer">
    <div class="hero-inner">
        <p>CSS Gradient</p>
    </div>
</div>

CSS

Copie o código abaixo e cole-o no seu documento CSS.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://identitydesign.us/wp-content/uploads/2026/11/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}