Gradientes holográficos e iridescência, explicados

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.

Exemplos de gradiente holográfico

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.

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.

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.

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

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 mostram como animar gradientes de forma eficiente.

Como manter os gradientes holográficos elegantes

Os acabamentos holográficos pertencem à estética Y2K, à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 calmo e texto escuro.

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.

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.