# Sfumati iridescenti: cambi di colore madreperlacei con i codici

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

L’iridescenza è la cugina discreta dell’olografico: una perla, una bolla di sapone, l’interno di una conchiglia. Ecco colori, codici e regole che la fanno sembrare una superficie e non un arcobaleno.

## The short version

- Uno sfumato iridescente unisce diverse tinte chiare e affini, di solito lilla, menta, rosa tenue, azzurro e crema, così la superficie sembra cambiare colore mentre la guardi.
- L’iridescenza si distingue dal design olografico per intensità: l’olografico percorre l’arcobaleno intero ad alta saturazione, l’iridescente resta morbido, chiaro e quasi neutro.
- L’effetto perlato nasce da una base chiara, bassa saturazione, un solo punto di luce bianco e tinte vicine sulla ruota dei colori.
- L’iridescenza scura, come una chiazza d’olio o il guscio di uno scarabeo, usa la stessa idea su un fondo quasi nero con petrolio profondo, viola e bronzo.
- Il testo su uno sfondo iridescente ha bisogno di un’area calma e uniforme dietro di sé, perché le tinte chiare che cambiano danno poco contrasto ai caratteri chiari e un contrasto agitato a quelli scuri.

Uno **sfumato iridescente** è una miscela di tinte chiare molto vicine, in genere lilla, menta, rosa tenue, azzurro cielo e un crema caldo, stese su una base chiara con un morbido punto di luce bianco. L’effetto imita cose iridescenti reali: perle, bolle di sapone, l’interno di una conchiglia di abalone. I colori sono delicati e cambiano gradualmente sulla superficie, quindi si legge come un riflesso e non come una striscia di colore. I codici qui sotto sono pronti da incollare in CSS o in qualsiasi strumento di design che accetti l’esadecimale.

## Codici per sfumati iridescenti

Ognuno parte da un quasi bianco o da un quasi nero e aggiunge tinte vicine tra loro. Copiane uno così com’è, oppure cambia una sola tonalità per renderlo tuo.

- Perla: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opale: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Bolla di sapone: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Chiazza d’olio: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Guscio di scarabeo: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Quattro miscele iridescenti chiare e due scure. Tutte e sei tengono le tinte vicine per intensità, ed è questo che impedisce loro di sembrare un arcobaleno.

Nota cosa hanno in comune quelle chiare: nessuna tonalità è del tutto satura, e il punto più chiaro è bianco puro o quasi. Spingi una tonalità verso un colore forte e la perla diventa uno [sfumato pastello](https://gradiently.design/it/guide/pastel-gradients) o, andando oltre, un arcobaleno.

## Iridescente e olografico a confronto

Spesso si usano le due parole per la stessa cosa, ma in design descrivono aspetti diversi. L’olografico imita gli adesivi in lamina e gli ologrammi delle carte di credito: tutte le tinte, alta saturazione, bande nette. L’iridescente imita superfici naturali che cambiano colore con discrezione. Se vuoi la versione più rumorosa, [gli sfumati olografici](https://gradiently.design/it/guide/holographic-gradients) sono trattati per intero.

| Caratteristica | Iridescente | Olografico |
| --- | --- | --- |
| Saturazione | Bassa, tinte chiare | Alta, arcobaleno completo |
| Base | Quasi bianca o quasi nera | Spesso argento o i colori stessi |
| Transizioni | Lunghe e morbide | Brevi, spesso a bande |
| Riferimento nel mondo reale | Perla, conchiglia, bolla di sapone, olio sull’acqua | Lamina, adesivi, ologrammi di sicurezza |
| Atmosfera | Calma, raffinata, skincare, nozze | Giocosa, vistosa, Y2K, musica |

Il test più rapido: strizza gli occhi. Se vedi ancora tinte distinte, è olografico. Se vedi una superficie chiara e morbida con un accenno di colore, è iridescente.

## Come costruire da zero uno sfumato iridescente

1. **Scegli la base** L’iridescenza chiara parte dal bianco o da un bianco sporco appena caldo come `#fbf9f6`. Quella scura parte da un nero bluastro come `#0d0f1a`. La base deve coprire un terzo della superficie o più.
2. **Scegli da tre a cinque tinte vicine** Percorri la ruota dei colori a piccoli passi: lilla, cielo, menta, crema, rosa tenue. Tienile a luminosità simile, così nessuna salta in primo piano.
3. **Abbassa la saturazione** Se una tinta sembra un colore che sapresti nominare da una parte all’altra della stanza, è troppo forte. Per le versioni chiare, punta a tinte quasi bianche con una traccia di colore.
4. **Aggiungi un solo punto di luce** Una piccola macchia radiale bianca, spostata verso un angolo, dice all’occhio da dove arriva la luce. Una basta; due cominciano a sembrare un pulsante lucido.
5. **Finisci con una grana fine** Le miscele chiare formano facilmente bande sugli schermi. Un po’ di rumore spezza i gradini, come spiega [il banding negli sfumati](https://gradiently.design/it/guide/gradient-banding) insieme alla soluzione.

Il passaggio che conta di più è il terzo. La maggior parte dei design iridescenti che falliscono sono semplicemente troppo colorati. La vera perla è quasi tutta bianca; il colore è qualcosa che noti per secondo.

- Bianco conchiglia: #fbf9f6
- Riflesso lilla: #ece6f6
- Riflesso menta: #dff3f4
- Riflesso cielo: #e4ecf7
- Riflesso rosa tenue: #fbe7f0
- Riflesso crema: #fff6e0
- Inchiostro grafite: #3d3a4a

Una palette iridescente funzionante: una base, cinque riflessi e un inchiostro scuro per il testo. È l’inchiostro a dare ai colori chiari qualcosa su cui appoggiarsi.

## CSS iridescente con cambio di colore al passaggio del mouse

Sul web puoi far muovere il riflesso quando qualcuno ci passa sopra, l’unica cosa che una perla vera fa e un’immagine piatta no. Registrare l’angolo con `@property` permette al browser di animarlo con fluidità; i browser senza supporto mostrano semplicemente lo stato a riposo. La [pagina MDN su @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) ha i dettagli.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

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

Una card perlata il cui riflesso gira al passaggio del mouse. Lo strato radiale bianco è il punto di luce; lo strato lineare porta le tinte.

Ruotare l’angolo è più delicato che far scorrere la posizione dello sfondo, perché le tinte restano ferme e cambia solo la loro direzione, il che somiglia di più a come una superficie vera cattura la luce. Per miscele più uniformi aiuta definire le tonalità in OKLCH; vedi [gli sfumati OKLCH in CSS](https://gradiently.design/it/guide/css-gradient-oklch).

## Mettere parole su uno sfondo iridescente

L’iridescenza chiara è una superficie difficile per il testo. Il bianco vi sparisce, e il testo scuro funziona solo se l’area dietro è uniforme. Usa un inchiostro scuro preso dalla palette invece del nero puro, tieni le parole sulla parte più calma della miscela e lascia il cambio più movimentato in un angolo. Le regole generali sono in [testo su uno sfondo sfumato](https://gradiently.design/it/guide/text-on-gradient).

Un post chiaro e perlato per il lancio di un prodotto, con il titolo che attraversa la parte più luminosa del riflesso e risulta debole

Le parole stese direttamente sulle tinte che cambiano perdono i contorni dove il riflesso è più luminoso.

Lo stesso post perlato per il lancio di un prodotto, con un’area uniforme dietro il titolo e il cambio di colore spostato in un angolo

Con la zona più calma dietro il titolo e il cambio di colore spinto di lato, lo stesso post si legge a colpo d’occhio.

Qui un Mark di Gradiently fa la differenza. Un Mark sa dove sono le parole: sposta la sua zona più calma dietro di esse e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla palette del Mark stesso, così una superficie perlata e morbida resta leggibile a ogni misura, senza riquadri né ombre.

## Dove l’iridescenza funziona meglio

- **Skincare e bellezza**: post di lancio, cartelle colori e adesivi per confezioni. Suggerisce rugiada e luce sulla pelle; vedi [il design del brand per la cura della pelle](https://gradiently.design/it/guide/skincare-brand-design).
- **Nozze e cerimonie**: inviti e save the date su perla, con inchiostro grafite e margini generosi.
- **Gioielleria**: uno sfondo perla o opale dietro le foto dei prodotti richiama le pietre senza competere con loro.
- **Musica e vita notturna**: la miscela scura a chiazza d’olio su una storia 1080×1920, con una riga di testo bianco sull’area più scura.
- **Pagine di prodotti tech**: un hero perlato con il riflesso al passaggio del mouse visto sopra, tenuto dietro a un titolo breve.

L’iridescenza sta bene con serif puliti o sans leggeri e spaziatura ampia. Stona con ombre pesanti, contorni spessi e accenti saturi. Se vuoi il metallo al posto della perla, [l’effetto cromo](https://gradiently.design/it/guide/chrome-effect) è il fratello più duro e freddo.

## FAQ

### Quali colori formano uno sfumato iridescente?

Lilla chiaro, menta, azzurro cielo, rosa tenue e crema su base bianca, più un morbido punto di luce bianco. Per una versione scura usa petrolio profondo, viola e bronzo su un nero bluastro.

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

L’iridescente è morbido e chiaro, come una perla o una bolla di sapone. L’olografico percorre l’arcobaleno intero ad alta saturazione, come gli adesivi in lamina.

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

Sovrapponi un punto di luce radiale bianco a uno sfumato lineare di tinte chiare e vicine. Per farlo cambiare, registra un angolo con `@property` e modificalo al passaggio del mouse.

### Perlato e iridescente sono la stessa cosa?

Il perlato è un tipo di iridescenza: quasi tutto bianco con un lieve cambio di colore. L’iridescente comprende anche cambi più scuri, come l’olio sull’acqua o il guscio di uno scarabeo.

### Che colore del carattere funziona su uno sfondo iridescente?

Un inchiostro scuro della palette, come una grafite con un tocco di viola, posato sull’area più calma. Il testo bianco raramente si legge sull’iridescenza chiara.