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

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.

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.

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.

Si vous voulez un peu plus de couleur en gardant la même légèreté, les dégradés pastel sont l’étape suivante. Pour l’autre extrémité de l’échelle des neutres, voir les codes de dégradé gris.

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.

Les fonds de photo produit 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.

/* 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;
}

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 approfondit les fondus et les calques.

Un blanc net, pas délavé

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.

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 offrent d’autres idées dans le même esprit, et les fonds de hero de site web montre comment un dégradé porcelaine ou lumière du matin peut porter toute une page d’accueil.

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.