Gradientes iridescentes: brilho perolado com códigos

Um gradiente iridescente é uma mistura de tons claros e próximos entre si, tipicamente lilás, menta, rosa-claro, azul-céu e um creme quente, sobre uma base clara com um ponto de luz branco e suave. O efeito imita coisas iridescentes de verdade: pérolas, bolhas de sabão, o interior de uma concha de abalone. As cores são delicadas e mudam aos poucos pela superfície, então o resultado se lê como um brilho, e não como uma faixa de cor. Os códigos abaixo estão prontos para colar em CSS ou em qualquer ferramenta de design que aceite hex.

Códigos de gradiente iridescente

Cada um começa de um quase branco ou de um quase preto e acrescenta tons vizinhos entre si. Copie como está ou troque uma única parada para torná-lo seu.

Repare no que as claras têm em comum: nenhuma parada é totalmente saturada, e o ponto mais claro é branco puro ou quase puro. Leve qualquer parada para uma cor forte e a pérola vira um gradiente pastel ou, indo ainda mais longe, um arco-íris.

Iridescente ou holográfico

Muita gente usa as duas palavras para a mesma coisa, mas em design elas descrevem visuais diferentes. O holográfico imita adesivos metalizados e hologramas de cartão de crédito: todos os matizes, saturação alta, faixas marcadas. O iridescente imita superfícies naturais que mudam de cor discretamente. Se você quer a versão mais chamativa, gradientes holográficos trata dela por completo.

Como montar um gradiente iridescente do zero

1. 1

   Escolha a base

   A iridescência clara começa do branco ou de um branco quebrado levemente quente, como #fbf9f6. A escura começa de um preto azulado, como #0d0f1a. A base deve cobrir um terço ou mais da superfície.

2. 2

   Escolha de três a cinco tons vizinhos

   Percorra o círculo cromático em passos pequenos: lilás, céu, menta, creme, rosado. Mantenha todos com luminosidade parecida, para que nenhum salte à frente.

3. 3

   Reduza a saturação

   Se um tom parece uma cor que você conseguiria nomear do outro lado da sala, está forte demais. Nas versões claras, busque tons quase brancos com um traço de matiz.

4. 4

   Acrescente um ponto de luz

   Uma pequena mancha radial branca, deslocada para um canto, mostra ao olhar de onde vem a luz. Uma basta; duas começam a parecer um botão brilhante.

5. 5

   Finalize com um grão fino

   Misturas claras formam faixas com facilidade nas telas. Um pouco de ruído quebra os degraus, como faixas em gradientes explica junto com a solução.

O passo que mais importa é o terceiro. A maioria dos designs iridescentes que falham são simplesmente coloridos demais. A pérola de verdade é esmagadoramente branca; a cor é algo que você nota em segundo lugar.

CSS iridescente com mudança de cor no hover

Na web, você pode fazer o brilho se mover quando alguém aponta para ele, que é a única coisa que uma pérola impressa faz e uma imagem chapada não consegue. Registrar o ângulo com @property permite que o navegador o anime com suavidade; navegadores sem suporte simplesmente mostram o estado de repouso. A página do MDN sobre @property tem os detalhes.

@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}

Girar o ângulo é mais suave que deslizar a posição do fundo, porque os tons ficam no lugar e só a direção deles muda, o que se aproxima mais do jeito como uma superfície real reflete a luz. Para misturas mais uniformes, definir as paradas em OKLCH ajuda; veja gradientes OKLCH em CSS.

Como colocar palavras sobre um fundo iridescente

A iridescência clara é uma superfície difícil para o texto. O texto branco some sobre ela, e o texto escuro só funciona se a área atrás dele for uniforme. Use uma tinta escura tirada da paleta em vez de preto puro, mantenha as palavras sobre a parte mais calma da mistura e deixe a mudança mais agitada num canto. As regras gerais estão em texto sobre fundo de gradiente.

É aqui que um Mark do Gradiently mostra o seu valor. Um Mark sabe onde estão as palavras: leva a região mais calma para trás delas, e a Tinta automática escolhe texto claro ou escuro linha por linha a partir da paleta do próprio Mark, então uma superfície perolada e suave continua legível em qualquer tamanho, sem caixas nem sombras.

Onde a iridescência funciona melhor

• Skincare e beleza: posts de lançamento, cartelas de tons e adesivos de embalagem. Sugere orvalho e luz sobre a pele; veja design de marca de skincare.
• Noivas e casamentos: convites e save the dates sobre pérola, com tinta grafite e margens generosas.
• Joias: um fundo de pérola ou opala atrás das fotos de produto realça as pedras sem competir com elas.
• Música e vida noturna: a mistura escura de mancha de óleo num story de 1080×1920, com uma linha de texto branco sobre a área mais escura.
• Páginas de produtos de tecnologia: um destaque perolado com o brilho no hover mostrado acima, mantido atrás de um título curto.

A iridescência combina bem com tipografia serifada limpa ou sem serifa leve e espaçamento amplo. Ela briga com sombras projetadas pesadas, contornos grossos e destaques saturados. Se você quer metal em vez de pérola, o efeito cromado é o irmão mais duro e frio.