Gradientes holográficos e iridescência, explicados

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.

Exemplos de gradientes holográficos

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.

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.

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.

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

Manter os gradientes holográficos com bom gosto

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

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.

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.