# Superposition de dégradé : teinter une photo sans la masquer

[Canonical HTML page](https://gradiently.design/fr/guide/gradient-overlay)

Une bonne superposition change l’ambiance d’une photo et donne à vos mots un appui, tout en laissant l’image transparaître. Une mauvaise transforme chaque image en un même rectangle trouble. Voici comment les distinguer.

## The short version

- Une superposition de dégradé est une couche de couleur qui s’estompe sur une photo, utilisée pour teinter l’image, créer une ambiance ou ménager une zone plus calme pour le texte.
- La superposition la plus courante est un voile dégradé : transparent d’un côté et sombre de l’autre, pour n’assombrir que la partie de la photo derrière les mots.
- Un voile coloré utilise les couleurs de la marque à opacité partielle, souvent avec un mode de fusion comme produit, superposition ou couleur, pour que la photo garde ses détails.
- Les superpositions fonctionnent mieux quand elles ne couvrent que la zone qui en a besoin, plutôt que d’assombrir toute l’image uniformément.
- Si un voile dégradé doit dépasser environ 80 % d’opacité à son bord le plus sombre pour que le texte se lise, choisissez une photo plus calme ou déplacez les mots.

Une **superposition de dégradé** est une couche de couleur qui s’estompe sur une photo, posée par-dessus pour la teinter, unifier une série d’images ou rendre un titre lisible. L’astuce, c’est le fondu : une partie de la photo est fortement touchée, le reste à peine. C’est pourquoi une superposition en dégradé paraît réfléchie là où un aplat noir à 50 % ressemble à un rafistolage. Vous choisissez où tombe la couleur, jusqu’où elle monte en intensité et comment elle se mélange à l’image en dessous.

## Quatre types de superposition de dégradé

Presque toutes les superpositions que vous voyez sur un site web, une affiche ou une publication relèvent de l’un de ces quatre types. Savoir lequel il vous faut évite beaucoup de tâtonnements avec les curseurs d’opacité.

| Superposition | Ce qu’elle fait | À utiliser pour |
| --- | --- | --- |
| Voile dégradé | Du transparent au sombre sur un bord | Titres et légendes sur des photos chargées |
| Voile coloré | Couleurs de marque à intensité partielle sur toute l’image | Faire de photos disparates une série cohérente |
| Duotone ou mappage de dégradé | Remplace les couleurs de la photo par deux des vôtres ou plus | Des looks forts et graphiques ; voir [l’effet duotone](https://gradiently.design/fr/guide/duotone-effect) |
| Vignettage | Assombrit les coins avec un fondu radial | Attirer l’œil vers le centre |

Les quatre familles de superposition. La plupart des créations n’en demandent qu’une, pas les quatre.

## Le voile dégradé : une superposition pour le texte

Le voile dégradé est le cheval de trait. Il commence totalement transparent et s’assombrit vers le bord où se trouvent vos mots, en général en bas ou à gauche. La photo reste intacte là où est le sujet, et le texte obtient un socle sombre et calme. Utilisez un ton sombre tiré de la photo elle-même plutôt que du noir pur : un brun profond sur un intérieur chaleureux, un marine sur une marine. Le noir pur ressemble à une tache.

- Voile en bas, marine: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Voile à gauche, brun chaud: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vignettage: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Trois superpositions seules, avant qu’une photo ne passe dessous. Chacune reste transparente là où serait le sujet.

Les 40 % supérieurs du voile du bas sont entièrement transparents, ce qui garde les visages et les produits lumineux. L’obscurité monte dans la moitié inférieure et culmine tout au bord, exactement là où se trouve une légende. Pour d’autres façons de garder des mots lisibles sur des images, lisez [du texte lisible sur des photos](https://gradiently.design/fr/guide/readable-text-on-photos).

## Voiles colorés et modes de fusion

Le voile coloré est la façon dont les marques font ressembler à une même famille des photos de banque d’images, des clichés de téléphone et des photos d’événements. Posez un dégradé de deux couleurs de marque sur la photo et changez son mode de fusion. Le mode de fusion décide comment la couleur se mélange à l’image, et il compte plus que les couleurs.

| Mode de fusion | Effet sur la photo | Idéal avec |
| --- | --- | --- |
| Normal | Couvre la photo à l’opacité choisie | Les voiles derrière le texte |
| Produit (multiply) | Assombrit et teinte ; les blancs prennent la couleur de la superposition | Les photos claires et aérées |
| Superposition (screen) | Éclaircit et teinte ; les noirs prennent la couleur de la superposition | Les photos sombres et d’ambiance |
| Couleur (color) | Garde les ombres et lumières de la photo, remplace ses teintes | Une teinte de marque unique et forte |
| Lumière tamisée (soft light) | Contraste et teinte légers | Des voiles subtils sur des portraits |

Entre parenthèses, le nom CSS ; Figma, Photoshop et la plupart des outils de design utilisent les mêmes modes.

Voile violet vers corail: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

Un voile de trois couleurs à opacité décroissante. En mode produit sur une photo pâle, il évoque un crépuscule violet et chaud ; en mode superposition sur une photo sombre, il rayonne.

## Comment ajouter une superposition de dégradé à une photo

1. **Décidez à quoi sert la superposition** Texte, ambiance ou cohérence. Un voile dégradé pour le texte, un voile coloré pour l’ambiance et la cohérence. Si vous ne savez pas lequel, vous n’en avez probablement pas besoin.
2. **Prélevez un ton sombre dans la photo** Choisissez la couleur la plus profonde déjà présente dans l’image pour un voile dégradé, ou deux couleurs de marque pour un voile coloré.
3. **Tracez le dégradé sur la zone qui en a besoin** Commencez transparent sur le sujet et montez vers le bord où sont les mots. Gardez un long fondu pour qu’aucune ligne ne soit visible.
4. **Choisissez un mode de fusion** Normal pour les voiles dégradés, produit pour les photos claires, superposition pour les sombres, couleur pour une teinte unique.
5. **Baissez l’opacité jusqu’à ce qu’elle disparaisse presque** Puis remontez d’un cran. Les meilleures superpositions ne se remarquent que lorsqu’on les désactive.
6. **Vérifiez le texte à la taille d’un téléphone** Réduisez la création à sa taille d’affichage réelle et lisez chaque mot. Un contraste qui fonctionne sur un écran d’ordinateur peut échouer sur un téléphone ; [le contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les seuils à viser.

## Quelle intensité pour une superposition de dégradé

### Masque la photo

- Un calque noir uni à 50 % sur toute l’image
- La même superposition sur chaque image, quelle que soit la lumière
- Du noir pur ou du gris qui ternit la peau et les plats
- Un bord net là où le dégradé s’arrête
- Une superposition si forte que la photo pourrait être n’importe quoi

### Teinte la photo

- Transparente sur le sujet, plus sombre seulement derrière les mots
- Une intensité ajustée à chaque photo
- Un ton sombre tiré de l’image ou de la marque
- Un fondu long et progressif, sans ligne
- La photo reste reconnaissable d’un coup d’œil

En pratique, si le bord le plus sombre d’un voile dégradé doit dépasser environ 80 % pour que le texte se lise, la photo est trop chargée à cet endroit. Déplacez les mots, recadrez autrement ou choisissez une image plus calme. Un voile coloré sur toute l’image demande bien moins, sinon la photo cesse de ressembler à une photo.

## Les superpositions de dégradé sur un site web

Sur le web, vous pouvez empiler la superposition et la photo dans une seule déclaration, ce qui les garde ensemble quand l’image change. La superposition vient en premier, car le CSS peint la première couche au-dessus. L’ensemble des techniques, modes de fusion et pseudo-éléments compris, se trouve dans [les superpositions de dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

Un voile en bas sur une photo d’en-tête. Changez l’image, la superposition reste.

## Un voile fidèle à votre marque à chaque fois

Les superpositions dérivent quand chaque designer choisit ses propres couleurs. Dans le Studio Gradiently, les photos peuvent être teintées aux couleurs de votre Mark en mono, en duotone ou en voile, si bien que des images de sources différentes partagent une même palette sans ajustement à la main. Et quand les mots reposent sur un Mark plutôt que sur une photo, il apaise de lui-même la zone derrière eux, sans aucune superposition. Lisez [des photos en duotone aux couleurs de votre Mark](https://gradiently.design/fr/guide/photo-duotone-in-mark-colours) pour comprendre le fonctionnement du voile.

Une publication immobilière où le titre Nouveau sur le marché se trouve sur la partie la plus chargée du fond

Sans aide, la couleur la plus chargée traverse directement le titre.

La même publication immobilière avec une zone plus calme et plus profonde derrière le titre pour que chaque ligne se lise

Quand le Mark réagit, la zone derrière les mots s’apaise, le travail que fait d’habitude un voile dégradé.

## FAQ

### Qu’est-ce qu’une superposition de dégradé ?

Une couche de couleur qui s’estompe sur une image, posée par-dessus pour la teinter, créer une ambiance ou faciliter la lecture du texte. Elle diffère d’une superposition unie parce que son intensité varie sur l’image.

### Quelle opacité pour une superposition sur photo ?

Aussi peu que nécessaire pour que le texte se lise : souvent 50 à 80 % au bord le plus sombre d’un voile dégradé, et bien moins pour un voile coloré sur toute la photo. S’il vous en faut plus, la photo est probablement trop chargée à cet endroit.

### Quel mode de fusion choisir pour une superposition de couleur ?

Produit convient aux photos claires, superposition aux photos sombres, et couleur remplace les teintes de la photo en gardant ses ombres et lumières. Utilisez normal pour les voiles derrière le texte.

### Faut-il utiliser du noir pour une superposition de dégradé ?

En général non. Un ton profond prélevé dans la photo, comme un marine ou un brun foncé, assombrit l’image sans la ternir.

### Comment ajouter une superposition de dégradé en CSS ?

Indiquez d’abord le dégradé puis l’image dans `background-image`, par exemple `linear-gradient(...), url(photo.jpg)`. La première couche est peinte au-dessus.