# Gradienti olografici e iridescenza: come funzionano

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

La lamina olografica, le bolle di sapone e la madreperla cambiano colore mentre ti muovi. Uno schermo piatto non può farlo, ma un gradiente ben costruito può convincere l’occhio del contrario.

## The short version

- Un gradiente olografico imita i materiali che cambiano colore con l’angolo di osservazione, come la lamina olografica, le bolle di sapone e la madreperla.
- La vera iridescenza nasce dalla luce che interferisce in strati sottili o si diffrange su creste finissime, ed è per questo che i colori scorrono in ordine d’arcobaleno quando ti muovi.
- Sullo schermo, un gradiente conico di tinte d’arcobaleno chiare più un riflesso bianco in movimento è il modo più convincente per simularla.
- I gradienti olografici rendono meglio in toni chiari e perlati con un punto luce brillante, piuttosto che in colori d’arcobaleno pienamente saturi.
- Gli effetti olografici funzionano come accento su una card, un adesivo o la superficie di un prodotto, e stancano in fretta quando coprono tutto.

Un **gradiente olografico** è un gradiente che imita i materiali iridescenti, come la lamina olografica, le bolle di sapone, l’olio sull’acqua o la madreperla, il cui colore cambia quando li muovi. Sullo schermo significa tinte d’arcobaleno chiare che sfumano l’una nell’altra, di solito con un riflesso bianco brillante che attraversa la superficie. I migliori sembrano un materiale che cattura la luce; i peggiori sembrano un adesivo arcobaleno da clip art. La differenza sta quasi tutta nella misura.

## Cosa rende iridescente una superficie

L’iridescenza è un colore che dipende dall’angolo da cui guardi. In una bolla di sapone o in una macchia d’olio, la luce si riflette sulla parte superiore e inferiore di una pellicola sottilissima, e i due riflessi interferiscono, rafforzando alcuni colori e annullandone altri. Nella lamina olografica e sul retro di un CD, creste microscopiche scompongono la luce nei suoi colori, come un prisma. In entrambi i casi l’occhio vede lo stesso risultato: colori in ordine d’arcobaleno che scivolano sulla superficie quando la inclini.

| Aspetto | Cosa vedi | Come simularlo |
| --- | --- | --- |
| Lamina olografica | Bande nette di colore arcobaleno che saltano con l’angolo | Gradienti conici o a strisce con punti luce netti |
| Iridescente | Passaggi morbidi d’arcobaleno su una superficie liscia | Gradienti conici o mesh chiari, riflesso lento |
| Perlato | Quasi bianco con lievi accenni di rosa, azzurro e verde | Gradiente radiale quasi bianco con bordi tinti |
| Macchia d’olio | Colori arcobaleno che vorticano su una superficie scura | Fondo scuro con bande d’arcobaleno spente |
| Cromato | Bande grigie a specchio, niente arcobaleno | Bande chiare e scure nette nei grigi |

Cinque finiture imparentate. Olografico e iridescente sono quelle arcobaleno; perla e cromo sono le cugine più sobrie.

## Esempi di gradienti olografici

- Lamina conica: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Iridescenza lineare: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Perla: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Macchia d’olio: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Cromo: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Lamina a strisce: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Sei finiture come singoli valori CSS. Nota quanto sono chiari i colori d’arcobaleno: è questo che li fa leggere come lamina e non come una bandiera.

## Perché i gradienti conici funzionano così bene

Un gradiente conico cambia colore girando attorno a un punto, quindi le sue tinte si aprono a ventaglio da un centro, come la luce diffusa da una lamina curva. Sposta il centro oltre il bordo della forma e il ventaglio diventa una serie di morbide bande diagonali. Cambia l’angolo `from` e ogni colore scivola, esattamente come fa l’iridescenza quando inclini la superficie. I dettagli della sintassi sono in [gradienti conici](https://gradiently.design/it/guide/conic-gradient).

- Lampo rosa: #ffd6f5
- Lilla: #d9c8ff
- Azzurro ghiaccio: #bfe9ff
- Menta: #c9ffe6
- Burro: #fff4c2
- Riflesso: #ffffff

Una palette olografica è un arcobaleno chiaro in ordine, più il bianco. Saltare un passaggio o mescolare l’ordine rompe l’illusione.

Tieni tutte le tinte a una luminosità simile e alta. La lamina vera riflette molta luce, quindi i suoi colori sono brillanti e leggermente velati di bianco. Se un colore è molto più scuro o più saturo degli altri, si legge come una striscia di vernice invece che come un riflesso. I colori chiari sono anche più indulgenti: non diventano grigi dove si incontrano, perché sono tutti vicinissimi al bianco.

> **Dov’è la luce** Decidi da dove arriva la luce e metti lì il riflesso più brillante. Una superficie olografica con il punto luce nel posto sbagliato sembra piatta, per quanto belli siano i suoi colori.

## Come creare un effetto olografico in CSS

Due livelli fanno quasi tutto il lavoro: un arcobaleno conico chiaro sotto e una stretta banda di bianco sopra, che si sposta quando passi il cursore sull’elemento, come la luce che scorre su una lamina. Tieni il movimento lento e disattivalo per chi preferisce ridurre le animazioni.

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

Una lamina conica chiara con un riflesso bianco che la attraversa al passaggio del cursore. Il livello del riflesso è largo il 250% così può spostarsi.

Per un risultato più realistico, aggiungi una grana finissima su tutta la superficie e lascia scorrere un secondo riflesso, più tenue, con un’angolazione diversa. Se vuoi che l’intera superficie si muova da sola, [sfondi con gradiente animato](https://gradiently.design/it/guide/animated-gradient-background) spiega come animare i gradienti in modo efficiente.

## Gradienti olografici con buon gusto

### Clip art

- Colori d’arcobaleno pienamente saturi
- Effetto olografico su ogni superficie
- Lamina carica dietro il testo
- Scintillio veloce e continuo

### Materiale

- Tinte chiare e perlate in ordine d’arcobaleno
- Un solo oggetto olografico: una card, un badge, un prodotto
- Fondo pieno o calmo dietro le parole
- Un riflesso lento che si muove quando succede qualcosa

Le finiture olografiche appartengono all’[estetica Y2K](https://gradiently.design/it/guide/y2k-aesthetic), al packaging beauty, alle carte collezionabili, all’abbigliamento da festival e agli accessori tech. Su un brand, tratta l’effetto come la lamina su una scatola stampata: usata in un solo punto, segnala qualcosa di speciale. Abbinala a tanto bianco o a un calmo [fondo pastello](https://gradiently.design/it/guide/pastel-gradients) e a un testo scuro.

Un post di lancio prodotto che annuncia un’edizione limitata in lamina su un gradiente chiaro e morbido

L’annuncio di un drop è il posto naturale per una superficie chiara e cangiante: la finitura stessa dice «edizione limitata».

## L’olografico in stampa e nel packaging

Nessuna combinazione di inchiostri normali può riprodurre la vera iridescenza, perché l’inchiostro stampato non cambia con l’angolo. Un gradiente olografico stampato apparirà come un arcobaleno chiaro, che può essere bellissimo, ma per l’effetto vero ti servono lamina olografica o film iridescente dalla tua tipografia. Se progetti per entrambi, tieni la versione per lo schermo chiara e semplice, così quella stampata non delude; vedi [gradienti per la stampa](https://gradiently.design/it/guide/print-gradients).

Puoi trovare Mark chiari e perlati nel Mercato cercando parole di colore come «perla» o «lilla iridescente», e usarli nei tuoi design a qualsiasi dimensione.

## FAQ

### Che cos’è un gradiente olografico?

Un gradiente olografico imita materiali iridescenti come lamina, bolle di sapone e perla, usando tinte d’arcobaleno chiare in ordine e un riflesso brillante.

### Che differenza c’è tra olografico e iridescente?

La lamina olografica mostra bande d’arcobaleno più nette che saltano; le superfici iridescenti mostrano passaggi di colore più morbidi e fluidi. Entrambe cambiano con l’angolo di osservazione.

### Come si crea un effetto olografico in CSS?

Usa un `conic-gradient` chiaro di tinte d’arcobaleno e sovrapponi un riflesso bianco in movimento con un `linear-gradient`, animato al passaggio del cursore o allo scroll.

### Quali colori compongono un gradiente olografico?

Rosa chiaro, lilla, azzurro ghiaccio, menta e giallo burro, in ordine d’arcobaleno, più il bianco per il riflesso.

### Si può stampare un gradiente olografico?

Con il solo inchiostro puoi stampare soltanto un arcobaleno chiaro. Per una vera finitura olografica, chiedi alla tua tipografia la lamina olografica o il film iridescente.