# Efeito de texto cromado: tipografia e fundos metálicos

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

Cromado não é cinza. É um espelho do mundo em volta, espremido na superfície de uma letra. Quando você entende isso, um texto cromado convincente leva um gradiente e alguns minutos.

## The short version

- Um efeito de texto cromado imita metal polido, que reflete o ambiente em vez de ter uma cor própria.
- Gradientes cromados convincentes mostram um céu claro sobre uma linha de horizonte nítida e um chão escuro abaixo, com um brilho mais forte perto da base.
- Em CSS, texto cromado é um gradiente linear recortado nas letras com background-clip: text e um preenchimento de texto transparente.
- O cromado funciona melhor em tipografia display pesada e larga, em tamanhos grandes, e mal em textos finos ou pequenos.
- Tingir a parte do céu do gradiente de azul, rosa ou violeta leva o cromado do industrial ao retrô ou ao Y2K.

Um **efeito de texto cromado** funciona porque metal polido quase não tem cor própria: ele espelha o ambiente. Em uma letra brilhante você vê um céu claro na metade de cima, um horizonte escuro e nítido atravessando o meio e um chão que volta a clarear perto da borda de baixo. Coloque essas faixas em um gradiente com uma quebra seca no horizonte, recorte em tipografia pesada e você tem cromado. Uma transição suave de cinza, que é o que a maioria tenta primeiro, parece só cinza.

## Como o cromado reflete a luz

Imagine um para-choque cromado ao ar livre. A curva de cima reflete o céu, então ela é clara e muitas vezes levemente azulada. Onde a superfície vira para o chão, o reflexo muda de repente para a paisagem escura: essa é a linha do horizonte, e é o detalhe mais importante de todos. Abaixo dela, o reflexo do chão clareia à medida que a curva volta a subir, terminando em um brilho de borda forte.

- **Faixa do céu:** clara, fria, ficando mais clara em direção ao topo.
- **Horizonte:** um degrau seco do claro para o escuro logo abaixo do meio. Sem transição suave.
- **Faixa do chão:** escura no horizonte, esquentando ou clareando para baixo.
- **Brilho de borda:** uma linha fina e clara perto da borda de baixo.
- **Contorno:** uma borda escura em volta de cada letra separa o metal do fundo.

## Gradientes cromados para copiar

- Cromado clássico: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Cromado céu: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Cromado líquido Y2K: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Cromado escuro: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Fundo de disco cromado: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Quatro gradientes para texto e um fundo. Repare no salto quase seco em cada gradiente de texto por volta de 48 a 50%: esse horizonte duro é o que se lê como metal.

As versões tingidas são onde o cromado fica interessante. Um céu azul dá o visual clássico de emblema de carro; rosas e violetas levam ao Y2K, que abusou do cromado líquido. [Estética Y2K](https://gradiently.design/pt-br/guide/y2k-aesthetic) trata dessa época, e [gradiente prata](https://gradiently.design/pt-br/guide/silver-gradient) traz metais mais suaves e acetinados para quando o cromado espelhado é demais.

## Texto cromado em CSS

A técnica é texto com gradiente: pinte um gradiente como fundo do elemento, recorte no formato das letras e deixe o preenchimento do texto transparente. Uma sombra deslocada e dura, aplicada com `filter` em vez de `text-shadow` para ficar atrás do gradiente recortado, dá peso às letras. [Texto com gradiente](https://gradiently.design/pt-br/guide/css-gradient-text) explica o método e o suporte dos navegadores com mais profundidade.

```css
.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}
```

Tipografia cromada clássica. O gradiente ocupa a caixa da linha, então mantenha o `line-height` em 1, ou o horizonte se afasta do meio das letras.

## Texto cromado em um app de design

1. **Escreva a palavra primeiro** Digite uma palavra curta em uma fonte display pesada e em tamanho grande. Converta em contornos só se o seu app não conseguir preencher texto editável com gradiente.
2. **Aplique um preenchimento em gradiente vertical** Use as paradas do Cromado clássico acima. Garanta que o gradiente vá do topo à base das letras, e não atravesse o canvas inteiro.
3. **Deixe o horizonte nítido** Arraste as paradas clara e escura do meio quase uma por cima da outra. Se ainda parecer suave, aproxime mais.
4. **Adicione a borda e o peso** Um contorno escuro de um ou dois pixels e depois uma sombra dura deslocada direto para baixo. Dispense sombras desfocadas e brilhos externos.

## Fontes que combinam com cromado

O cromado precisa de área. Traços finos não têm espaço para céu, horizonte e chão, então o efeito vira uma linha cinza. Escolha fontes pesadas, largas, de preferência arredondadas ou que aceitem bisel, e use em tamanho grande.

| Fonte | Caráter | Melhor para |
| --- | --- | --- |
| Rubik Mono One | Pesada, larga, cantos arredondados | Logos, palavras únicas |
| Bungee | Sinalização, em blocos, vertical | Cartazes, títulos de eventos |
| Michroma | Larga, técnica, futurista | Tecnologia e automobilismo |
| Monoton | Estilo neon com linhas internas, retrô | Visuais anos 80 e disco |

Quatro fontes display gratuitas do Google Fonts que seguram bem um gradiente cromado. Todas são fontes display: nunca use para texto corrido.

Para mais opções, [fontes display](https://gradiently.design/pt-br/guide/display-fonts) lista fontes pesadas por clima, e [efeito de texto retrô](https://gradiently.design/pt-br/guide/retro-text-effect) combina cromado com contornos e extrusão para um tratamento anos 80 completo.

## Como acertar o cromado

### Parece falso

- Uma transição suave de cinza-claro para cinza-escuro
- Horizonte colocado bem no topo ou na base
- Cromado em texto fino ou pequeno
- Sem contorno, então as letras derretem no fundo
- Halos de brilho suaves em volta das letras

### Parece metal

- Um degrau de horizonte seco logo abaixo do meio
- Céu claro em cima, chão escuro embaixo
- Tipografia display pesada em tamanho de título
- Um contorno escuro fino e uma sombra dura deslocada
- Um fundo escuro liso ou em gradiente com espaço em volta da palavra

Use cromado em uma palavra ou em um título curto, nunca em um parágrafo. É um tratamento de título para capas de álbum, cartazes de eventos, produtos, canais de games e campanhas nostálgicas. Sobre um fundo carregado ele some, então dê a ele uma superfície calma e mais escura.

Uma capa de álbum quadrada com a palavra TURBO em maiúsculas pesadas sobre uma superfície escura

Uma palavra pesada sobre uma superfície escura: o cenário de que a tipografia cromada precisa para parecer metal.

Um story vertical de uma festa chamada Night Drive com uma linha curta e simples de detalhes embaixo

Um story vertical em que um título curto leva o brilho e o detalhe continua simples e legível.

No Gradiently, tratamentos de Lettering como Extrusão, Interno e Contorno dão profundidade, uma linha gravada ou um contorno à tipografia de título sobre um Mark vivo, o que combina bem com visuais metálicos, e o Mark mantém a área mais calma atrás das palavras, então um título brilhante nunca briga com um fundo carregado. Para um brilho iridescente em vez de metal espelhado, veja [gradiente holográfico](https://gradiently.design/pt-br/guide/holographic-gradients).

## FAQ

### Como faço um efeito de texto cromado?

Use um gradiente vertical com uma faixa de céu clara, um horizonte escuro e seco logo abaixo do meio e uma faixa de chão mais clara, depois recorte em tipografia pesada e adicione um contorno escuro fino.

### Como faço texto cromado em CSS?

Defina um gradiente linear cromado como fundo e use `background-clip: text` com `-webkit-text-fill-color: transparent`. Adicione `filter: drop-shadow()` para uma sombra dura deslocada.

### Que cores formam um gradiente cromado?

Quase branco, cinza-azulado claro, um carvão bem escuro no horizonte, cinza médio e um brilho forte perto da base. Tinja o céu de azul, rosa ou violeta para versões retrô.

### Quais fontes funcionam melhor para texto cromado?

Fontes display pesadas e largas, como Rubik Mono One, Bungee ou Michroma, em tamanho grande. Fontes finas não têm espaço para o reflexo aparecer.

### Qual a diferença entre cromado e prata?

Cromado é um espelho, com um reflexo de horizonte nítido e contraste forte. Prata, em design, costuma ser mais suave e acetinado, com transições mais delicadas.