CSS : ajouter un calque dégradé (ombre sombre) sur les images d’arrière-plan pour rendre le texte lisible

Il arrive que le texte ou la légende sur une image soit illisible, selon le contraste de couleur entre l’élément au premier plan et l’arrière-plan. J’avais l’habitude de retoucher mon image pour l’assombrir ou l’éclaircir afin que le texte HTML ressorte et reste lisible pour les utilisateurs, mais voici une solution bien plus simple avec quelques lignes de CSS !

HTML

Copiez le code ci-dessous et collez-le dans votre document HTML.

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

CSS

Copiez le code ci-dessous et collez-le dans votre document 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;
}