Les dégradés transparents en CSS : fondus, voiles et scrims

Pour rendre un dégradé CSS transparent, donnez à l’un de ses arrêts une couleur à alpha nul : linear-gradient(to bottom, #7c3aed, transparent) fond le violet vers le néant et laisse voir ce qui se trouve en dessous. La même idée sert aux fondus en fin de texte, aux voiles sombres derrière les légendes et aux voiles colorés sur les photos. Pour fondre le contenu d’un élément plutôt que son arrière-plan, utilisez plutôt mask-image avec un dégradé.

Les façons d’écrire une couleur transparente

Pourquoi les fondus viraient au gris

Le mot-clé transparent est du noir à alpha nul. Les premiers navigateurs mélangeaient séparément les canaux rouge, vert et bleu et le canal alpha : un fondu du blanc vers transparent passait donc par un gris semi-transparent en chemin. C’est pourquoi les anciens tutoriels insistent sur rgba(255, 255, 255, 0).

La spécification impose désormais l’alpha prémultiplié : chaque couleur est pondérée par son opacité avant le mélange, si bien qu’un arrêt totalement transparent n’apporte aucune couleur. Tous les navigateurs actuels le font. Écrire la couleur correspondante à alpha nul reste une habitude sans risque, et elle vous protège dans les clients de messagerie et les anciennes WebViews.

L’endroit où s’arrête le fondu compte autant que ses couleurs. Un arrêt à 70 % termine le fondu tôt et laisse le reste de la boîte totalement dégagé, idéal pour une teinte qui ne doit toucher qu’un bord. Deux arrêts à la même position créent une coupure nette de la couleur au vide, utile pour les barres à moitié remplies et les fonds partagés. Les positions d’arrêt sont expliquées dans les dégradés linéaires CSS.

Fondre le contenu avec mask-image

Un dégradé d’arrière-plan se trouve derrière le contenu : il ne peut donc pas fondre du texte, des images ou une liste qui défile. Un masque le peut. Avec mask-image, les parties opaques du dégradé gardent l’élément visible et les parties transparentes le masquent. La couleur du masque n’a pas d’importance, seul son alpha compte.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

L’ancienne alternative était un dégradé blanc posé sur le contenu. Il casse dès que la page n’est pas blanche, en mode sombre par exemple, et il bloque les clics si vous oubliez pointer-events: none. Un masque n’a aucun de ces problèmes.

Les scrims : des dégradés transparents pour le texte

Un scrim assombrit une partie d’une image pour que le texte posé dessus se lise, puis s’efface jusqu’à la transparence totale pour que le reste de la photo reste lumineux. Un fondu à deux arrêts fonctionne, mais sa rampe droite laisse une ligne visible là où l’assombrissement s’arrête. Davantage d’arrêts, espacés pour adoucir la fin, masquent ce bord.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Teintez le scrim d’une version profonde de la couleur de la photo plutôt que de noir pur, et il fera partie de l’image. Sur une photo de coucher de soleil chaude, un brun profond comme rgb(41 20 8 / 0.75) se fond dans l’image, là où le noir ressemblerait à un filtre posé dessus. Les voiles en dégradé en CSS traite des lavis de couleur et des modes de fusion, et le texte sur une image du placement.

Trous transparents et projecteurs

Inversez l’idée : transparent au centre, sombre à l’extérieur. Un dégradé radial posé sur une page ou une image laisse une zone éclairée et atténue discrètement tout le reste, ce qui convient aux conseils d’accueil, aux gros plans produit et aux diapositives.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

Pour les publications sociales et l’imprimé, vous avez rarement besoin de construire des scrims à la main. Dans Gradiently, le Mark lui-même fait de la place à vos mots, en approfondissant ou en éclaircissant les couleurs près des lettres, sans calque de voile à régler pour chaque taille.