In breve
- 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.
In questa pagina
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 |
Esempi di gradienti olografici
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.
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.
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.
.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; }
}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 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, 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 e a un testo scuro.
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.
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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
