# Dégradés holographiques et iridescence expliqués

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

Le film holographique, les bulles de savon et la nacre changent de couleur quand on bouge. Un écran plat ne peut pas le faire, mais un dégradé bien construit peut en convaincre l’œil.

## The short version

- Un dégradé holographique imite les matières qui changent de couleur selon l’angle de vue, comme le film holographique, les bulles de savon et la nacre.
- La vraie iridescence vient de la lumière qui interfère dans de fines couches ou se disperse sur de fines stries, ce qui explique que les couleurs se décalent dans l’ordre de l’arc-en-ciel quand on bouge.
- À l’écran, un dégradé conique de teintes d’arc-en-ciel pâles avec un reflet blanc mobile est la manière la plus convaincante de la simuler.
- Les dégradés holographiques sont plus beaux dans des tons pâles et nacrés avec un reflet lumineux, plutôt qu’en couleurs d’arc-en-ciel entièrement saturées.
- Les effets holographiques fonctionnent en accent sur une carte, un autocollant ou la surface d’un produit, et lassent vite quand ils recouvrent tout.

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.

| Style | Ce que l’on voit | Comment le simuler |
| --- | --- | --- |
| Film holographique | Bandes nettes de couleurs d’arc-en-ciel qui sautent avec l’angle | Dégradés coniques ou rayés avec des reflets nets |
| Irisé | Doux décalages d’arc-en-ciel sur une surface lisse | Dégradés coniques ou maillés pâles, reflet lent |
| Nacré | Surtout blanc avec de faibles nuances de rose, de bleu et de vert | Dégradé radial quasi blanc aux bords teintés |
| Nappe d’huile | Des couleurs d’arc-en-ciel qui tourbillonnent sur une surface sombre | Fond sombre avec des bandes d’arc-en-ciel atténuées |
| Chrome | Bandes de miroir grises, sans arc-en-ciel | Bandes dures de clair et de sombre en gris |

Cinq finitions voisines. L’holographique et l’irisé sont les finitions arc-en-ciel ; la nacre et le chrome sont leurs cousins plus discrets.

## Exemples de dégradés holographiques

- Film conique: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Iridescence linéaire: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Nacre: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Nappe d’huile: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Chrome: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Rayures de film: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Six finitions en simples valeurs CSS. Remarquez à quel point les couleurs d’arc-en-ciel sont pâles : c’est ce qui les fait lire comme du film plutôt que comme un drapeau.

## 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](https://gradiently.design/fr/guide/conic-gradient).

- Éclat rose: #ffd6f5
- Lilas: #d9c8ff
- Bleu glacier: #bfe9ff
- Menthe: #c9ffe6
- Beurre: #fff4c2
- Reflet: #ffffff

Une palette holographique est un arc-en-ciel pâle dans l’ordre, plus du blanc. Sauter des étapes ou mélanger l’ordre brise l’illusion.

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.

> **D’où vient la lumière** Décidez d’où vient la lumière et placez-y le reflet le plus brillant. Une surface holographique dont le reflet est au mauvais endroit paraît plate, aussi belles que soient ses couleurs.

## 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.

```css
.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; }
}
```

Un film conique pâle avec un reflet blanc qui balaie la surface au survol. La couche de reflet fait 250 % de large pour pouvoir se déplacer.

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é](https://gradiently.design/fr/guide/animated-gradient-background) montre comment animer des dégradés efficacement.

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

### Clip art

- Des couleurs d’arc-en-ciel entièrement saturées
- L’effet holographique sur chaque surface
- Du film chargé derrière le texte courant
- Un chatoiement rapide et constant

### Matière

- Des teintes pâles et nacrées dans l’ordre de l’arc-en-ciel
- Un seul objet holographique : une carte, un badge, un produit
- Un fond uni ou calme derrière les mots
- Un reflet lent qui bouge quand quelque chose se passe

Les finitions holographiques appartiennent à [l’esthétique Y2K](https://gradiently.design/fr/guide/y2k-aesthetic), 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](https://gradiently.design/fr/guide/pastel-gradients) et à un texte sombre.

Un post de lancement annonçant une édition limitée en film sur un doux dégradé pâle

Une annonce de lancement est un terrain naturel pour une surface pâle et changeante : la finition elle-même dit limité.

## 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](https://gradiently.design/fr/guide/print-gradients).

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.

## FAQ

### Qu’est-ce qu’un dégradé holographique ?

Un dégradé holographique imite les matières irisées comme le film, les bulles de savon et la nacre, avec des teintes d’arc-en-ciel pâles dans l’ordre et un reflet lumineux.

### Quelle différence entre holographique et irisé ?

Le film holographique montre des bandes d’arc-en-ciel plus nettes et qui sautent ; les surfaces irisées montrent des décalages de couleur plus doux et plus lisses. Les deux changent avec l’angle de vue.

### Comment créer un effet holographique en CSS ?

Utilisez un `conic-gradient` pâle de teintes d’arc-en-ciel et superposez-lui un reflet en `linear-gradient` blanc mobile, animé au survol ou au défilement.

### Quelles couleurs font un dégradé holographique ?

Rose pâle, lilas, bleu glacier, menthe et jaune beurre, dans l’ordre de l’arc-en-ciel, plus du blanc pour le reflet.

### Peut-on imprimer un dégradé holographique ?

L’encre seule ne peut imprimer qu’un arc-en-ciel pâle. Pour une vraie finition holographique, renseignez-vous auprès de votre imprimeur sur le film holographique ou le film irisé.