# Superposer un dégradé en CSS : teinter et assombrir une image
[Canonical HTML page](https://gradiently.design/fr/guide/css-gradient-overlay)
Poser un dégradé sur une photo demande une ligne de CSS en plus. Choisir la bonne des trois méthodes décide si l’image se charge vite, si le voile peut s’animer et si les mots posés dessus restent lisibles.
## The short version
- Le voile en dégradé le plus rapide en CSS est un second calque d’arrière-plan : listez le dégradé avant url() dans background-image pour qu’il passe au-dessus.
- Pour un élément img, placez le dégradé sur un pseudo-élément ::before ou ::after d’un conteneur positionné.
- background-blend-mode et mix-blend-mode transforment un voile en dégradé en lavis de couleur qui teinte l’image au lieu de la couvrir.
- Les images d’en-tête définies en arrière-plan CSS sont découvertes plus tard que les éléments img : un img avec un voile se charge en général plus vite en haut de page.
- Un voile destiné à porter du texte doit être le plus sombre derrière les mots et transparent ailleurs, pas un film sombre uniforme sur toute la photo.
Le **dégradé sur une image en CSS** le plus simple est un arrière-plan en calques : `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Les calques listés en premier sont dessinés au-dessus : le dégradé recouvre donc la photo. Quand l’image est un élément ``, placez plutôt le dégradé sur un pseudo-élément, et quand vous voulez que la couleur teinte la photo au lieu de la couvrir, ajoutez un mode de fusion. Chaque méthode convient à un usage différent.
## Méthode 1 : un arrière-plan en calques
`background-image` accepte une liste séparée par des virgules. La première valeur est le calque du dessus. Dégradés et images se mélangent librement, et chaque calque peut avoir sa propre taille et sa position si vous listez ces propriétés dans le même ordre. C’est le bon choix pour les images décoratives qui n’ont pas besoin de texte alternatif.
```css
.banner {
background-color: #0f172a; /* shows until the photo loads */
background-image:
linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
url("/images/workshop.jpg");
background-size: cover;
background-position: center;
color: #f8fafc;
}
```
Un panneau sombre à gauche pour le texte, qui s’efface à 70 % pour que la droite de la photo reste lumineuse. La couleur de repli correspond au voile : le texte se lit avant même l’arrivée de l’image.
- Panneau latéral pour le texte: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Bandeaux en haut et en bas: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Vignettage doux: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Teinte de marque en diagonale: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`
Quatre préréglages de voile, présentés ici sur la page. Placez n’importe lequel devant `url()` dans votre propre `background-image`.
Les bandeaux en haut et en bas conviennent aux galeries avec un titre en haut et un crédit en bas. Le vignettage attire l’œil vers le centre sans porter de texte. La teinte de marque donne un rendu affirmé aux pages d’équipe et aux bannières d’événement ; [les voiles en dégradé](https://gradiently.design/fr/guide/gradient-overlay) explique quand chacun convient du point de vue du design.
## Méthode 2 : un pseudo-élément sur un img
Les images de contenu ont leur place dans des éléments `` : elles bénéficient d’un texte alternatif, d’un `srcset` adaptatif, du chargement différé et d’une découverte précoce par le navigateur. Un dégradé d’arrière-plan ne peut pas passer au-dessus d’un `` : enveloppez-le et placez le dégradé sur le pseudo-élément du conteneur.
```html
Harbour Days, 14 to 16 June
```
Un vrai élément image avec un vrai texte alternatif. La légende se placera sur le voile.
```css
.overlay {
position: relative;
margin: 0;
isolation: isolate;
}
.overlay img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
pointer-events: none;
transition: opacity 250ms ease-out;
}
.overlay figcaption {
position: absolute;
inset: auto 1.5rem 1.5rem;
z-index: 1;
color: #f8fafc;
}
.overlay:hover::after { opacity: 0.6; }
```
`isolation: isolate` garde l’empilement du voile à l’intérieur de la figure. Le voile peut s’estomper au survol parce qu’il forme son propre calque.
### Calque d’arrière-plan
- Un élément, une déclaration
- Pas de texte alternatif, donc images décoratives seulement
- Découvert tard par le navigateur, ce qui peut ralentir un en-tête
- Le voile ne peut pas s’estomper sans animer tout l’arrière-plan
### img et pseudo-élément
- Un conteneur et quelques lignes de plus
- Un vrai texte alternatif et un `srcset` adaptatif
- Découvert tôt ; `fetchpriority="high"` aide l’image principale
- L’opacité du voile s’anime à moindre coût
Pour une image d’en-tête qui est le plus grand élément à l’écran, la seconde méthode l’emporte en général en vitesse de chargement. [Optimiser les images pour le web](https://gradiently.design/fr/guide/lighthouse-image-performance) explique pourquoi le navigateur trouve les éléments `` plus tôt que les arrière-plans CSS.
## Méthode 3 : les modes de fusion pour les lavis de couleur
Un voile simple se pose sur la photo comme un verre teinté. Un mode de fusion mêle le dégradé aux clairs et aux sombres de la photo elle-même, comme si elle avait été prise dans cette couleur. Utilisez `background-blend-mode` pour les arrière-plans en calques et `mix-blend-mode` sur un pseudo-élément au-dessus d’un ``.
| Mode de fusion | Ce qu’il fait | Bon voile pour |
| --- | --- | --- |
| `multiply` | Assombrit ; les zones blanches prennent la couleur du dégradé | Des teintes riches et sombres sur des photos lumineuses |
| `screen` | Éclaircit ; les zones noires prennent la couleur | Des rendus aériens et délavés sur des photos sombres |
| `overlay` | Renforce le contraste et pousse la couleur dans les tons moyens | Une couleur de marque percutante sur des portraits |
| `color` | Garde la lumière de la photo, remplace sa couleur | Des lavis façon bichromie à partir d’un dégradé à deux couleurs |
| `soft-light` | Une version douce d’overlay | Une chaleur ou une fraîcheur subtile |
Les cinq modes à connaître. `color` avec un dégradé à deux couleurs est la bichromie web la plus rapide.
```css
/* Duotone wash on a layered background */
.duotone {
background-image:
linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
url("/images/portrait.jpg");
background-size: cover;
background-blend-mode: color;
}
/* The same idea over an img element */
.overlay--wash::after {
background: linear-gradient(135deg, #1e1b4b, #f472b6);
mix-blend-mode: color;
}
```
`background-blend-mode` fusionne les calques d’un même élément. `mix-blend-mode` fusionne un élément avec ce qui se trouve derrière lui, ici la photo.
La technique complète, y compris le choix des deux couleurs, se trouve dans [l’effet bichromie](https://gradiently.design/fr/guide/duotone-effect).
## Des voiles qui gardent le texte lisible
L’erreur la plus courante est un film sombre uniforme sur toute la photo, par exemple du noir à 50 %. Il ternit l’image partout et peut ne pas être assez sombre derrière les mots. Donnez plutôt une forme au voile : le plus sombre sous le texte, transparent là où la photo compte.
1. **Décidez où vont les mots** En bas à gauche pour les légendes, dans le tiers gauche pour le texte d’en-tête, au centre pour une seule ligne.
2. **Orientez le dégradé vers eux** Utilisez `to top` pour un texte en bas, `to right` pour un texte à gauche, ou un dégradé radial centré sur les mots.
3. **Arrêtez-vous tôt** Atteignez la transparence totale vers 60 à 70 % pour que l’essentiel de la photo reste intact.
4. **Vérifiez le pire cas** Mesurez le contraste là où la photo est la plus claire derrière une lettre. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les rapports.
Des voiles adoucis à nombreux arrêts paraissent plus fluides qu’un fondu à deux arrêts ; la méthode se trouve dans [les dégradés transparents en CSS](https://gradiently.design/fr/guide/css-gradient-transparent).
## Des voiles sans tâtonnement
Sur un site web, vous réglez chaque voile à la main. Pour les publications sociales, les bannières et les diapositives, Gradiently saute cette étape : un Mark sait où se trouvent vos mots et approfondit ou éclaircit ses propres couleurs derrière eux, les photos peuvent être teintées dans les couleurs du Mark en monochrome, en bichromie ou en lavis, et avec Pro la création se redimensionne vers tous les formats en une fois, sans voile à retravailler.
Une large bannière d’événement pour Harbour Days avec un fond en dégradé qui s’approfondit derrière le titre
Une bannière d’événement au format d’en-tête de site, dont le fond s’apaise derrière les mots au lieu d’un voile réglé à la main.
## FAQ
### Comment mettre un dégradé sur une image d’arrière-plan en CSS ?
Listez le dégradé avant l’image dans `background-image` : `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Le premier calque est dessiné au-dessus.
### Comment ajouter un voile en dégradé sur un élément img ?
Enveloppez l’image dans un élément positionné et placez le dégradé sur son pseudo-élément `::after`, avec `position: absolute` et `inset: 0`.
### Quelle différence entre background-blend-mode et mix-blend-mode ?
`background-blend-mode` fusionne les calques d’arrière-plan d’un même élément. `mix-blend-mode` fusionne tout un élément avec ce qui se trouve derrière lui.
### Quelle doit être l’opacité d’un voile sur image pour le texte ?
Assez sombre pour que le texte passe les tests de contraste au point le plus clair derrière lui. Donnez au dégradé une forme qui le rend le plus sombre à cet endroit et transparent ailleurs.
### Peut-on animer un voile en dégradé au survol ?
Oui. Placez le voile sur un pseudo-élément et faites la transition sur son `opacity`, ce qui coûte moins cher qu’animer l’arrière-plan lui-même.
