# Gradientes holográficos e iridescência, explicados

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

A folha holográfica, as bolas de sabão e a madrepérola mudam de cor quando te mexes. Um ecrã plano não consegue fazer isso, mas um gradiente bem construído pode convencer o olho de que sim.

## The short version

- Um gradiente holográfico imita materiais que mudam de cor com o ângulo de visão, como a folha holográfica, as bolas de sabão e a madrepérola.
- A iridescência real vem da luz que interfere em camadas finas ou se dispersa em estrias finas, e é por isso que as cores mudam pela ordem do arco-íris quando te mexes.
- No ecrã, um gradiente cónico de tons pálidos do arco-íris com um brilho branco em movimento é a forma mais convincente de o simular.
- Os gradientes holográficos ficam melhor em tons pálidos e perolados com um realce claro do que em cores do arco-íris totalmente saturadas.
- Os efeitos holográficos funcionam como destaque num cartão, num autocolante ou na superfície de um produto, e cansam depressa quando cobrem tudo.

Um **gradiente holográfico** é um gradiente que imita materiais iridescentes, como a folha holográfica, as bolas de sabão, o óleo sobre a água ou a madrepérola, cuja cor muda quando os mexes. No ecrã, isso significa tons pálidos do arco-íris a fluírem uns nos outros, normalmente com um brilho branco a atravessar a superfície. Os melhores parecem um material a apanhar a luz; os piores parecem um autocolante de arco-íris de clip-art. A diferença está quase toda na contenção.

## O que torna algo iridescente

A iridescência é cor que depende do ângulo de onde olhas. Numa bola de sabão ou numa mancha de óleo, a luz reflete-se no topo e na base de uma película muito fina, e os dois reflexos interferem, reforçando umas cores e anulando outras. Na folha holográfica e no verso de um CD, estrias microscópicas separam a luz nas suas cores, como um prisma. Em ambos os casos, o resultado é o mesmo para o olho: cores pela ordem do arco-íris que deslizam pela superfície quando esta se inclina.

| Visual | O que vês | Como o simular |
| --- | --- | --- |
| Folha holográfica | Faixas nítidas de cor do arco-íris que saltam com o ângulo | Gradientes cónicos ou às riscas com realces nítidos |
| Iridescente | Mudanças suaves de arco-íris numa superfície lisa | Gradientes cónicos ou de malha pálidos, brilho lento |
| Perolado | Quase branco com leves toques de rosa, azul e verde | Gradiente radial quase branco com margens tingidas |
| Mancha de óleo | Cores do arco-íris em remoinho sobre uma superfície escura | Base escura com faixas de arco-íris suaves |
| Cromado | Faixas cinzentas espelhadas, sem arco-íris | Faixas duras claras e escuras em cinzentos |

Cinco acabamentos aparentados. O holográfico e o iridescente são os do arco-íris; o perolado e o cromado são os primos mais discretos.

## Exemplos de gradientes holográficos

- Folha cónica: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Iridescência linear: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Pérola: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Mancha de óleo: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Cromado: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Riscas de folha: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Seis acabamentos como valores CSS únicos. Repara como as cores do arco-íris são pálidas: é isso que as faz parecer folha metalizada e não uma bandeira.

## Porque é que os gradientes cónicos funcionam tão bem

Um gradiente cónico muda de cor à medida que se dá a volta a um ponto, por isso os tons abrem-se em leque a partir de um centro, como a luz a dispersar-se numa folha curva. Põe o centro fora da margem da forma e o leque torna-se em faixas diagonais suaves. Muda o ângulo `from` e todas as cores deslizam, que é exatamente o que a iridescência faz quando a inclinas. Os pormenores da sintaxe estão em [gradientes cónicos](https://gradiently.design/pt-pt/guide/conic-gradient).

- Clarão rosa: #ffd6f5
- Lilás: #d9c8ff
- Azul-gelo: #bfe9ff
- Menta: #c9ffe6
- Manteiga: #fff4c2
- Brilho: #ffffff

Uma paleta holográfica é um arco-íris pálido e ordenado, mais branco. Saltar passos ou baralhar a ordem quebra a ilusão.

Mantém todos os tons com uma luminosidade semelhante e alta. A folha real reflete muita luz, por isso as suas cores são claras e ligeiramente lavadas de branco. Se uma cor for muito mais escura ou mais saturada do que as outras, lê-se como uma risca de tinta e não como um reflexo. As cores pálidas também perdoam: não ficam cinzentas onde se encontram, porque estão todas muito perto do branco.

> **Onde está a luz** Decide de onde vem a luz e põe aí o brilho mais forte. Uma superfície holográfica com o realce no sítio errado parece plana, por melhores que sejam as cores.

## Como fazer um efeito holográfico em CSS

Duas camadas fazem a maior parte do trabalho: um arco-íris cónico pálido por baixo e uma faixa estreita de branco por cima que atravessa o elemento quando se passa o cursor, como luz a deslizar sobre folha metalizada. Mantém o movimento lento e desliga-o para quem prefere movimento reduzido.

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

Uma folha cónica pálida com um brilho branco que a atravessa ao passar o cursor. A camada de brilho tem 250% de largura para poder viajar.

Para mais realismo, junta um grão muito fino sobre toda a superfície e deixa um segundo brilho, mais ténue, correr noutro ângulo. Se quiseres que o campo inteiro derive sozinho, os [fundos em gradiente animados](https://gradiently.design/pt-pt/guide/animated-gradient-background) mostram como animar gradientes de forma eficiente.

## Manter os gradientes holográficos com bom gosto

### Clip-art

- Cores do arco-íris totalmente saturadas
- Efeito holográfico em todas as superfícies
- Folha carregada por trás do texto corrido
- Cintilar rápido e constante

### Material

- Tons pálidos e perolados pela ordem do arco-íris
- Um objeto holográfico: um cartão, um crachá, um produto
- Base lisa ou calma por trás das palavras
- Um brilho lento que se move quando algo acontece

Os acabamentos holográficos pertencem à [estética Y2K](https://gradiently.design/pt-pt/guide/y2k-aesthetic), às embalagens de beleza, aos cromos colecionáveis, à roupa de festival e aos acessórios de tecnologia. Numa marca, trata o efeito como folha metalizada numa caixa impressa: usado num só sítio, assinala algo especial. Combina-o com muito branco ou uma [base pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) calma e texto escuro.

Uma publicação de lançamento de produto a anunciar uma edição limitada em folha, sobre um gradiente suave e pálido

O anúncio de um lançamento é o sítio natural para uma superfície pálida e cambiante: o próprio acabamento diz edição limitada.

## Holográfico em impressão e embalagens

Nenhuma combinação de tintas comuns consegue reproduzir a iridescência real, porque a tinta impressa não muda com o ângulo. Um gradiente holográfico impresso vai parecer um arco-íris pálido, o que pode ser bonito, mas para o efeito verdadeiro precisas de folha holográfica ou película iridescente da tua gráfica. Se desenhas para os dois, mantém a versão de ecrã pálida e simples, para que a impressa não desiluda; vê [imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients).

Podes encontrar Marks pálidos e perolados no Mercado pesquisando palavras de cor como “pérola” ou “lilás iridescente”, e desenhar com eles em qualquer tamanho.

## FAQ

### O que é um gradiente holográfico?

Um gradiente holográfico imita materiais iridescentes como a folha metalizada, as bolas de sabão e a pérola, usando tons pálidos do arco-íris por ordem e um brilho claro.

### Qual é a diferença entre holográfico e iridescente?

A folha holográfica mostra faixas de arco-íris mais nítidas e que saltam; as superfícies iridescentes mostram mudanças de cor mais suaves e contínuas. Ambas mudam com o ângulo de visão.

### Como faço um efeito holográfico em CSS?

Usa um `conic-gradient` pálido com tons do arco-íris e sobrepõe-lhe um brilho branco em `linear-gradient` que se move, animado ao passar o cursor ou ao deslizar a página.

### Que cores fazem um gradiente holográfico?

Rosa pálido, lilás, azul-gelo, menta e amarelo-manteiga, pela ordem do arco-íris, mais branco para o brilho.

### É possível imprimir um gradiente holográfico?

A tinta sozinha só consegue imprimir um arco-íris pálido. Para um acabamento holográfico verdadeiro, pergunta à tua gráfica por folha holográfica ou película iridescente.