CSS: een donkere verlooplaag op achtergrondafbeeldingen zetten om tekst leesbaar te maken

Soms is de tekst of het bijschrift op een afbeelding slecht leesbaar, afhankelijk van het kleurcontrast tussen het voorgrondelement en de achtergrond. Vroeger bewerkte ik mijn afbeelding om hem donkerder of lichter te maken, zodat de HTML-tekst opviel en leesbaar was voor gebruikers, maar hier is een veel makkelijkere oplossing met een paar regels CSS!

HTML

Kopieer de onderstaande code en plak die in je HTML-document.

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

CSS

Kopieer de onderstaande code en plak die in je CSS-document.

.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;
}