# Dégradé blanc : codes de lumière subtils et épurés

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

Un dégradé blanc est le plus discret des dégradés, et celui que la plupart des designers ratent un peu. Ces codes montrent quel écart suffit, quelles teintes employer, et comment fondre proprement vers le blanc.

## The short version

- Un dégradé blanc fond le blanc pur dans un blanc cassé de quelques pour cent plus foncé seulement, teinté chaud, froid ou nacré.
- Les blancs cassés à légère teinte chaude évoquent le papier ; ceux à légère teinte bleue évoquent la porcelaine ou la neige.
- Un dégradé blanc a besoin d’assez d’amplitude pour survivre aux écrans de téléphone lumineux, où les très petits écarts disparaissent.
- Pour fondre un contenu dans un fond blanc en CSS, employez un dégradé de `rgb(255 255 255 / 0)` à `#ffffff`.
- Les dégradés blancs font d’excellents fonds de produit, car une retombée douce se lit comme un studio éclairé plutôt qu’un détourage plat.

Un **dégradé blanc** va du blanc pur à un blanc cassé à peine plus foncé, en général avec une légère teinte chaude, froide ou nacrée. Le changement est petit exprès : il doit paraître de la lumière tombant sur une surface, pas de la couleur. Les dégradés blancs sont ainsi idéaux pour les sites épurés, les photos produit, les invitations et les posts sociaux minimalistes. Vous trouverez ci-dessous quelle force leur donner, une palette de blancs cassés, des codes à copier et la bonne façon de fondre vers le blanc en CSS.

## Quel écart il faut à un dégradé blanc

Trop peu et personne ne le voit, surtout sur un téléphone à pleine luminosité. Trop et le blanc devient gris et terne. Le tableau donne trois forces, mesurées par la distance entre la couleur finale et le blanc pur. La plupart des designs veulent la médiane.

| Force | De | À | À utiliser pour |
| --- | --- | --- | --- |
| Murmure | `#ffffff` | `#f8f8f8` | Grandes sections web, lecture longue |
| Doux | `#ffffff` | `#efefef` | Cartes, posts sociaux, invitations |
| Visible | `#ffffff` | `#e2e2e2` | Fonds de produit, fonds infinis de studio |

Des valeurs neutres par souci de clarté. En pratique, teintez légèrement la couleur finale, chaude ou froide, comme dans les codes ci-dessous.

## Des blancs cassés pour construire

Des gris purement neutres au bout d’un dégradé blanc paraissent un peu sans vie. Une trace de teinte fait la différence : les blancs cassés chauds se lisent comme du papier, du lin et de l’ivoire ; les froids comme de la porcelaine, du givre et de la neige. Choisissez la teinte qui correspond au reste de votre palette, et gardez-la constante sur une série de designs.

- Blanc pur: #ffffff
- Ivoire: #fffdf8
- Papier: #f6f4f0
- Lin: #f1ece3
- Porcelaine: #f1f4f7
- Givre: #eaf2f8
- Nacre lilas: #f3eef8
- Nacre menthe: #eef6f6

Des blancs cassés. Sur une page blanche, ils paraissent presque identiques ; côte à côte, les familles chaude et froide diffèrent nettement.

## Codes de dégradé blanc

Chacun part du blanc pur ou tout près. Le papier et l’ivoire sont chauds et éditoriaux. La porcelaine et le givre sont froids et techniques. La lumière du matin ajoute une douce lueur depuis un coin, et la nacre fond plusieurs teintes à peine présentes pour une délicate irisation qui ne bascule jamais en arc-en-ciel.

- Papier: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Ivoire: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcelaine: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Givre: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Lumière du matin: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Nacre: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Six dégradés blancs. Sur un écran lumineux, ils se lisent comme des surfaces plutôt que des couleurs, ce qui est exactement le but.

Si vous voulez un peu plus de couleur en gardant la même légèreté, [les dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) sont l’étape suivante. Pour l’autre extrémité de l’échelle des neutres, voir les codes de [dégradé gris](https://gradiently.design/fr/guide/grey-gradient).

## Un dégradé blanc derrière des produits

Les photographes éclairent un fond blanc pour qu’il retombe doucement vers les bords, ce qui sépare l’objet du fond sans ligne d’ombre. Un dégradé blanc radial fait de même à l’écran. C’est surtout utile quand vous détourez un produit de sa photo : un blanc uni derrière paraît collé, tandis qu’un doux balayage paraît un studio.

Fond infini de studio: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Le plus lumineux juste au-dessus du centre, là où se pose le produit, retombant vers un gris clair dans les coins. Employez-le en 2048×2048 pour les images produit Shopify.

[Les fonds de photo produit](https://gradiently.design/fr/guide/product-photo-backgrounds) couvrent les ombres, les fonds colorés et les cas où le blanc est le mauvais choix.

## Fondre vers le blanc avec un dégradé CSS

Le dégradé blanc le plus courant sur le web n’est pas du tout un fond : c’est un fondu qui adoucit la fin d’un article tronqué, le bas d’une liste défilante ou le bord d’une photo. Écrivez l’extrémité transparente comme du blanc à opacité nulle. Les navigateurs modernes fondent `transparent` correctement, mais `rgb(255 255 255 / 0)` dit exactement ce que vous voulez et évite la bande grisâtre que dessinaient certains anciens moteurs.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

Un fondu qui finit en blanc plein juste avant le bord inférieur, pour que la dernière ligne de texte disparaisse proprement. Accordez la couleur finale au fond de votre page.

Si le fond de votre page est un blanc cassé plutôt qu’un blanc pur, fondez plutôt vers cette couleur, sinon le fondu finira en bande plus claire visible. [Le dégradé transparent CSS](https://gradiently.design/fr/guide/css-gradient-transparent) approfondit les fondus et les calques.

## Un blanc net, pas délavé

### Délavé

- Finir sur un gris moyen neutre
- Des changements si petits qu’ils disparaissent sur un téléphone
- Un texte gris clair sur un dégradé blanc cassé
- Des blancs cassés chauds et froids mélangés
- Fondre vers le blanc sur une page crème

### Net

- Finir sur un blanc cassé légèrement teinté
- Un changement doux mais visible, vérifié sur un téléphone
- Un texte presque noir ou bleu marine profond
- Une seule famille de teinte partout
- Fondre vers la couleur de fond exacte de la page

Les dégradés blancs forment aussi des bandes, bien que moins que les sombres ; si vous voyez des paliers sur un grand écran, un grain très fin y remédie, comme l’explique [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

## Des dégradés blancs dans les designs minimalistes

Les designs minimalistes vivent ou meurent par leur texte, et le blanc ne lui laisse aucune cachette. Employez une encre forte, presque noire, beaucoup d’espace et un détail en couleur. Un dégradé blanc ajoute juste assez de relief pour que la page paraisse éclairée et finie. [Les fonds minimalistes](https://gradiently.design/fr/guide/minimalist-backgrounds) offrent d’autres idées dans le même esprit, et [les fonds de hero de site web](https://gradiently.design/fr/guide/website-hero-background) montre comment un dégradé porcelaine ou lumière du matin peut porter toute une page d’accueil.

Une invitation de mariage en portrait avec un fond blanc ivoire doux et les mots « Vous êtes invités » en texte foncé

Une invitation de 5×7 pouces sur un doux Mark ivoire. Encre foncée, marges généreuses et rien d’autre.

Dans Gradiently, les Marks clairs fonctionnent comme les audacieux : le Mark garde une zone calme derrière les mots et l’encre Auto choisit une couleur de texte foncée dans la palette du Mark, si bien qu’un blanc délicat ne se retrouve jamais avec un texte gris qui disparaît.

## FAQ

### Quel est un bon code de dégradé blanc ?

Pour un doux rendu papier, essayez `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Pour un rendu porcelaine froid, finissez plutôt sur #e6ebf0.

### Comment faire un dégradé blanc vers transparent en CSS ?

Employez `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Remplacez la couleur finale par le fond de votre page s’il n’est pas blanc pur.

### Pourquoi mon dégradé blanc est-il invisible ?

La couleur finale est trop proche du blanc. Assombrissez-la vers #efefef, légèrement teintée chaude ou froide, et vérifiez-la sur un téléphone à pleine luminosité.

### Quelle couleur de texte sur un dégradé blanc ?

Presque noir, anthracite ou bleu marine profond. Évitez le texte gris clair, qui s’efface dans l’extrémité plus sombre du dégradé.