Dégradés holographiques et iridescence expliqués

Un dégradé holographique est un dégradé qui imite les matières irisées, comme le film holographique, les bulles de savon, l’huile sur l’eau ou la nacre, dont la couleur change quand on les bouge. À l’écran, cela donne des teintes d’arc-en-ciel pâles qui s’écoulent l’une dans l’autre, en général avec un reflet blanc lumineux qui traverse la surface. Les meilleurs donnent l’impression d’une matière qui capte la lumière ; les pires ressemblent à un autocollant arc-en-ciel en clip art. La différence tient presque entièrement à la retenue.

Ce qui rend une matière irisée

L’iridescence est une couleur qui dépend de l’angle sous lequel on regarde. Dans une bulle de savon ou une nappe d’huile, la lumière se reflète sur le dessus et le dessous d’un film très mince, et les deux reflets interfèrent, renforçant certaines couleurs et en annulant d’autres. Dans le film holographique et au dos d’un CD, de minuscules stries séparent la lumière en ses couleurs, comme un prisme. Dans les deux cas, le résultat est le même pour l’œil : des couleurs dans l’ordre de l’arc-en-ciel qui glissent sur la surface quand on l’incline.

Exemples de dégradés holographiques

Pourquoi les dégradés coniques fonctionnent si bien

Un dégradé conique change de couleur quand on tourne autour d’un point : ses teintes s’ouvrent en éventail depuis un centre, comme la lumière qui se disperse sur un film courbe. Placez le centre hors du bord de la forme et l’éventail devient de douces bandes en diagonale. Changez l’angle from et toutes les couleurs glissent, exactement ce que fait l’iridescence quand on l’incline. Le détail de la syntaxe se trouve dans les dégradés coniques.

Gardez chaque teinte à une luminosité proche et élevée. Le vrai film réfléchit beaucoup de lumière : ses couleurs sont vives et légèrement délavées de blanc. Si une couleur est beaucoup plus sombre ou plus saturée que les autres, elle se lit comme une bande de peinture plutôt que comme un reflet. Les couleurs pâles pardonnent aussi : elles ne virent pas au gris là où elles se rencontrent, car elles sont toutes très proches du blanc.

Créer un effet holographique en CSS

Deux couches font l’essentiel du travail : un arc-en-ciel conique pâle dessous, et une étroite bande blanche par-dessus qui se déplace au survol de l’élément, comme la lumière qui glisse sur un film. Gardez le mouvement lent et désactivez-le pour ceux qui préfèrent les animations réduites.

.holo {
  background-image:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: background-position 0.9s ease;
  border-radius: 20px;
}

.holo:hover {
  background-position: 0% 0, 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .holo { transition: none; }
}

Pour plus de réalisme, ajoutez un grain très fin sur toute la surface, et laissez un second reflet plus faible courir selon un autre angle. Si vous voulez que tout le champ dérive seul, les arrière-plans en dégradé animé montre comment animer des dégradés efficacement.

Garder les dégradés holographiques de bon goût

Les finitions holographiques appartiennent à l’esthétique Y2K, aux emballages de beauté, aux cartes à collectionner, aux tenues de festival et aux accessoires tech. Pour une marque, traitez l’effet comme le film d’une boîte imprimée : utilisé à un seul endroit, il signale quelque chose de spécial. Associez-le à beaucoup de blanc ou à un calme fond pastel et à un texte sombre.

L’holographique en impression et en packaging

Aucune combinaison d’encres ordinaires ne peut reproduire la vraie iridescence, car l’encre imprimée ne change pas avec l’angle. Un dégradé holographique imprimé ressemblera à un arc-en-ciel pâle, ce qui peut être charmant, mais pour le vrai effet il faut du film holographique ou du film irisé auprès de votre imprimeur. Si vous concevez pour les deux, gardez la version écran pâle et simple pour que la version imprimée ne déçoive pas ; voir imprimer des dégradés.

Vous trouverez des Marks pâles et nacrés dans le Marché en cherchant des mots de couleur en anglais comme « pearl » ou « iridescent lilac », et vous pouvez créer avec eux à n’importe quelle taille.