# Gradientes holográficos e iridescência, explicados

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

O holográfico, as bolhas de sabão e a madrepérola mudam de cor quando você se mexe. Uma tela plana não consegue fazer isso, mas um gradiente bem construído convence o olho de que consegue.

## The short version

- Um gradiente holográfico imita materiais que mudam de cor conforme o ângulo de visão, como o papel holográfico, as bolhas de sabão e a madrepérola.
- A iridescência real vem da luz que interfere em camadas finas ou se espalha em sulcos microscópicos, e é por isso que as cores mudam na ordem do arco-íris quando você se move.
- Na tela, um gradiente cônico com tons pálidos de arco-íris e um brilho branco em movimento é o jeito mais convincente de imitar o efeito.
- Os gradientes holográficos ficam melhores em tons pálidos e perolados com um reflexo claro do que em cores de arco-íris totalmente saturadas.
- Os efeitos holográficos funcionam como destaque num cartão, num adesivo ou na superfície de um produto e cansam rápido quando cobrem tudo.

Um **gradiente holográfico** é um gradiente que imita materiais iridescentes, como o papel holográfico, as bolhas de sabão, o óleo na água ou a madrepérola, cuja cor muda quando você os move. Na tela, isso significa tons pálidos de arco-íris fluindo uns nos outros, geralmente com um brilho branco atravessando a superfície. Os melhores parecem um material pegando luz; os piores parecem um adesivo de arco-íris de clip-art. A diferença está quase toda na contenção.

## O que torna algo iridescente

Iridescência é a cor que depende do ângulo de onde você olha. Numa bolha de sabão ou numa mancha de óleo, a luz reflete no topo e no fundo de uma película muito fina, e os dois reflexos interferem, reforçando algumas cores e anulando outras. No papel holográfico e no verso de um CD, sulcos microscópicos separam a luz nas suas cores, como um prisma. De um jeito ou de outro, o resultado para o olho é o mesmo: cores na ordem do arco-íris que deslizam pela superfície quando ela se inclina.

| Visual | O que você vê | Como imitar |
| --- | --- | --- |
| Papel holográfico | Faixas nítidas de arco-íris que saltam com o ângulo | Gradientes cônicos ou listrados com reflexos nítidos |
| Iridescente | Mudanças suaves de arco-íris numa superfície lisa | Gradientes cônicos ou mesh pálidos, brilho lento |
| Perolado | Quase todo branco, com leves toques de rosa, azul e verde | Gradiente radial quase branco com bordas tingidas |
| Mancha de óleo | Cores de arco-íris girando numa superfície escura | Fundo escuro com faixas de arco-íris suaves |
| Cromado | Faixas espelhadas cinza, sem arco-íris | Faixas duras de claro e escuro em cinzas |

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

## Exemplos de gradiente holográfico

- Holográfico cônico: `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%)`
- Listras holográficas: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Seis acabamentos em valores CSS únicos. Repare como as cores do arco-íris são pálidas: é isso que faz com que pareçam papel holográfico e não uma bandeira.

## Por que os gradientes cônicos funcionam tão bem

Um gradiente cônico muda de cor conforme você gira em torno de um ponto, então os tons se abrem em leque a partir de um centro, como a luz se espalhando num papel metalizado curvo. Coloque o centro fora da borda da forma e o leque vira faixas diagonais suaves. Mude o ângulo `from` e todas as cores deslizam, exatamente o que a iridescência faz quando você a inclina. Os detalhes da sintaxe estão em [gradientes cônicos](https://gradiently.design/pt-br/guide/conic-gradient).

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

Uma paleta holográfica é um arco-íris pálido em ordem, mais o branco. Pular etapas ou embaralhar a ordem quebra a ilusão.

Mantenha todos os tons numa luminosidade alta e parecida. O papel holográfico de verdade reflete muita luz, então as suas cores são claras e levemente lavadas de branco. Se uma cor for muito mais escura ou saturada que as outras, ela parece uma faixa de tinta e não um reflexo. Cores pálidas também perdoam: não ficam cinza onde se encontram, porque estão todas muito perto do branco.

> **Onde está a luz** Decida de onde vem a luz e coloque o brilho mais forte ali. Uma superfície holográfica com o reflexo no lugar errado parece chapada, por melhores que sejam as cores.

## Como fazer um efeito holográfico em CSS

Duas camadas fazem quase todo o trabalho: um arco-íris cônico pálido por baixo e uma faixa estreita de branco por cima, que atravessa o elemento quando você passa o mouse, como a luz deslizando sobre o papel metalizado. Mantenha o movimento lento e desligue-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; }
}
```

Um holográfico cônico pálido com um brilho branco que atravessa ao passar o mouse. A camada de brilho tem 250% de largura para poder se deslocar.

Para mais realismo, acrescente um grão bem fino sobre toda a superfície e deixe um segundo brilho, mais fraco, correr em outro ângulo. Se você quer que o campo inteiro flutue sozinho, os [fundos com gradiente animado](https://gradiently.design/pt-br/guide/animated-gradient-background) mostram como animar gradientes de forma eficiente.

## Como manter os gradientes holográficos elegantes

### Clip-art

- Cores de arco-íris totalmente saturadas
- Efeito holográfico em toda superfície
- Holográfico carregado atrás do texto corrido
- Cintilação rápida e constante

### Material

- Tons pálidos e perolados na ordem do arco-íris
- Um objeto holográfico: um cartão, um selo, um produto
- Fundo sólido ou calmo atrás das palavras
- Um brilho lento que se move quando algo acontece

Os acabamentos holográficos pertencem à [estética Y2K](https://gradiently.design/pt-br/guide/y2k-aesthetic), às embalagens de beleza, aos cards colecionáveis, à moda de festival e aos acessórios de tecnologia. Numa marca, trate o efeito como o hot stamping numa caixa impressa: usado num só lugar, ele indica algo especial. Combine-o com bastante branco ou um [fundo pastel](https://gradiently.design/pt-br/guide/pastel-gradients) calmo e texto escuro.

Um post de drop de produto anunciando uma edição holográfica limitada sobre um gradiente suave e pálido

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

## Holográfico na impressão e nas embalagens

Nenhuma combinação de tintas comuns reproduz 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 lindo, mas para o efeito real você precisa de hot stamping holográfico ou filme iridescente da sua gráfica. Se você está criando para os dois, mantenha a versão de tela pálida e simples, para que a impressa não decepcione; veja os [gradientes na impressão](https://gradiently.design/pt-br/guide/print-gradients).

Você encontra Marks pálidos e perolados no Mercado pesquisando palavras de cor como “pérola” ou “lilás iridescente” e pode criar com eles em qualquer tamanho.

## FAQ

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

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

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

O papel holográfico mostra faixas de arco-íris mais nítidas que saltam; as superfícies iridescentes mostram mudanças de cor mais suaves e contínuas. Os dois mudam com o ângulo de visão.

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

Use um `conic-gradient` pálido com tons de arco-íris e coloque por cima um brilho branco em `linear-gradient` que se move, animado ao passar o mouse ou ao rolar.

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

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

### Dá para imprimir um gradiente holográfico?

Só com tinta, dá para imprimir apenas um arco-íris pálido. Para um acabamento holográfico de verdade, pergunte à sua gráfica sobre hot stamping holográfico ou filme iridescente.