# Gradientes iridescentes: brilho perolado com códigos

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

A iridescência é a prima discreta do holográfico: uma pérola, uma bolha de sabão, o interior de uma concha. Estas são as cores, os códigos e as regras que fazem o efeito parecer uma superfície, e não um arco-íris.

## The short version

- Um gradiente iridescente mistura vários tons claros e próximos, geralmente lilás, menta, rosado, azul-céu e creme, para que a superfície pareça mudar de cor enquanto você a percorre com o olhar.
- A iridescência difere do design holográfico na intensidade: o holográfico percorre o arco-íris inteiro em alta saturação, enquanto o iridescente fica suave, claro e quase neutro.
- O efeito perolado vem de uma base clara, saturação baixa, um único ponto de luz branco e tons vizinhos no círculo cromático.
- A iridescência escura, como uma mancha de óleo ou a carapaça de um besouro, usa a mesma ideia sobre um fundo quase preto com verde-azulado profundo, violeta e bronze.
- Texto sobre um fundo iridescente precisa de uma área calma e uniforme atrás dele, porque tons claros e mutáveis dão pouco contraste ao texto claro e um contraste agitado ao texto escuro.

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.

- Pérola: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opala: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Bolha de sabão: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Mancha de óleo: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Carapaça de besouro: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Quatro misturas iridescentes claras e duas escuras. As seis mantêm os tons com intensidade parecida, e é isso que impede que pareçam um arco-íris.

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](https://gradiently.design/pt-br/guide/pastel-gradients) 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](https://gradiently.design/pt-br/guide/holographic-gradients) trata dela por completo.

| Qualidade | Iridescente | Holográfico |
| --- | --- | --- |
| Saturação | Baixa, tons claros | Alta, arco-íris completo |
| Base | Quase branco ou quase preto | Muitas vezes prata ou as próprias cores |
| Transições | Longas e suaves | Curtas, muitas vezes em faixas |
| Referência no mundo real | Pérola, concha, bolha de sabão, óleo na água | Papel metalizado, adesivos, hologramas de segurança |
| Clima | Calmo, refinado, skincare, noivas | Divertido, chamativo, Y2K, música |

O teste mais rápido: aperte os olhos. Se você ainda vê matizes distintos, é holográfico. Se vê uma superfície clara e suave com um toque de cor, é iridescente.

## Como montar um gradiente iridescente do zero

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. **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. **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. **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. **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](https://gradiently.design/pt-br/guide/gradient-banding) 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.

- Branco concha: #fbf9f6
- Brilho lilás: #ece6f6
- Brilho menta: #dff3f4
- Brilho céu: #e4ecf7
- Brilho rosado: #fbe7f0
- Brilho creme: #fff6e0
- Tinta grafite: #3d3a4a

Uma paleta de cores iridescente pronta para uso: uma base, cinco brilhos e uma tinta escura para o texto. É a tinta que dá às cores claras algo contra o que se apoiar.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) tem os detalhes.

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

Um cartão perolado cujo brilho gira no hover. A camada radial branca é o ponto de luz; a camada linear carrega os tons.

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](https://gradiently.design/pt-br/guide/css-gradient-oklch).

## 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](https://gradiently.design/pt-br/guide/text-on-gradient).

Um post claro e perolado de lançamento de produto em que o título atravessa a parte mais clara do brilho e fica apagado

Palavras colocadas direto sobre os tons que mudam perdem as bordas onde o brilho é mais forte.

O mesmo post perolado de lançamento com uma área uniforme atrás do título e a mudança de cor levada para um canto

Com a região mais calma atrás do título e a mudança de cor empurrada para o lado, o mesmo post se lê num relance.

É 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](https://gradiently.design/pt-br/guide/skincare-brand-design).
- **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](https://gradiently.design/pt-br/guide/chrome-effect) é o irmão mais duro e frio.

## FAQ

### Que cores formam um gradiente iridescente?

Lilás claro, menta, azul-céu, rosa-claro e creme sobre uma base branca, mais um ponto de luz branco e suave. Para uma versão escura, use verde-azulado profundo, violeta e bronze sobre um preto azulado.

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

O iridescente é suave e claro, como uma pérola ou uma bolha de sabão. O holográfico percorre o arco-íris inteiro em alta saturação, como adesivos metalizados.

### Como faço um efeito iridescente em CSS?

Sobreponha um ponto de luz radial branco a um gradiente linear de tons claros vizinhos. Para fazer o brilho mudar, registre um ângulo com `@property` e altere-o no hover.

### Perolado é o mesmo que iridescente?

O perolado é um tipo de iridescência: quase todo branco, com uma leve mudança de cor. O iridescente também inclui mudanças mais escuras, como óleo na água ou a carapaça de um besouro.

### Que cor de fonte funciona sobre um fundo iridescente?

Uma tinta escura da paleta, como um grafite com um toque de violeta, colocada sobre a área mais calma. Texto branco raramente fica legível sobre uma iridescência clara.