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

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

O cromado não é cinzento. É um espelho do mundo à volta, comprimido na superfície de uma letra. Quando percebes isso, umas letras cromadas convincentes levam um gradiente e uns minutos.

## The short version

- Um efeito de texto cromado imita metal polido, que reflete o que o rodeia em vez de ter cor própria.
- Os gradientes cromados convincentes mostram um céu claro acima de uma linha de horizonte nítida e um chão escuro por baixo, com um realce mais brilhante perto do fundo.
- Em CSS, o texto cromado é um gradiente linear recortado nas letras com background-clip: text e um preenchimento de texto transparente.
- O cromado funciona melhor em letra de exibição pesada e larga, em tamanhos grandes, e mal em texto fino ou pequeno.
- Tingir a parte do céu do gradiente de azul, rosa ou violeta muda o cromado de industrial para retro ou Y2K.

Um **efeito de texto cromado** funciona porque o metal polido quase não tem cor própria: espelha o que o rodeia. Numa letra brilhante vês um céu pálido na metade de cima, um horizonte escuro e nítido a meio e um chão que volta a clarear em direção à borda inferior. Põe essas faixas num só gradiente com uma quebra seca no horizonte, recorta-o em letra pesada e tens cromado. Um esbatido cinzento suave, que é o que a maioria tenta primeiro, parece apenas cinzento.

## Como o cromado reflete a luz

Imagina um para-choques cromado ao ar livre. A curva superior reflete o céu, por isso é pálida e muitas vezes ligeiramente azul. Onde a superfície passa a olhar para o chão, o reflexo muda de repente para a paisagem escura: essa é a linha do horizonte, e é o detalhe mais importante. Por baixo, o reflexo do chão aclara à medida que a curva volta a subir, acabando num realce brilhante na borda.

- **Faixa de céu:** pálida, fria, cada vez mais clara para cima.
- **Horizonte:** um salto seco do claro ao escuro logo abaixo do meio. Sem mistura suave.
- **Faixa de chão:** escura no horizonte, a aquecer ou a clarear para baixo.
- **Realce da borda:** uma linha fina e brilhante perto da borda inferior.
- **Contorno:** uma borda escura à volta de cada letra separa o metal do fundo.

## Gradientes cromados que podes copiar

- Cromado clássico: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Cromado de 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 letra e um para fundo. Repara no salto quase abrupto em cada gradiente de letra por volta dos 48 a 50%: esse horizonte seco é o que se lê como metal.

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

## Texto cromado em CSS

A técnica é o texto com gradiente: pinta um gradiente como fundo do elemento, recorta-o nas formas das letras e torna transparente o preenchimento do texto. Uma sombra deslocada e seca, aplicada com `filter` e não com `text-shadow` para ficar atrás do gradiente recortado, dá peso às letras. [Texto com gradiente](https://gradiently.design/pt-pt/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);
}
```

Letra cromada clássica. O gradiente estende-se pela caixa da linha, por isso mantém o `line-height` a 1 ou o horizonte afasta-se do meio das letras.

## Texto cromado numa aplicação de design

1. **Compõe primeiro a palavra** Escreve uma palavra curta numa fonte de exibição pesada, em tamanho grande. Só a converte em contornos se a tua aplicação não conseguir preencher texto vivo com um gradiente.
2. **Aplica um preenchimento de gradiente vertical** Usa as paragens do Cromado clássico acima. Garante que o gradiente vai do topo das letras ao fundo e não por toda a tela.
3. **Afia o horizonte** Arrasta as paragens clara e escura do meio quase uma sobre a outra. Se ainda parecer suave, aproxima-as mais.
4. **Acrescenta a borda e o peso** Um traço escuro de um ou dois píxeis e depois uma sombra seca deslocada diretamente para baixo. Dispensa sombras desfocadas e brilhos exteriores.

## Fontes que servem o cromado

O cromado precisa de área de superfície. Os traços finos não têm espaço para céu, horizonte e chão, por isso o efeito colapsa numa linha cinzenta. Escolhe fontes pesadas, largas, de preferência arredondadas ou amigas do bisel, e usa-as grandes.

| Fonte | Carácter | Melhor para |
| --- | --- | --- |
| Rubik Mono One | Pesada, larga, cantos arredondados | Logótipos, palavras soltas |
| Bungee | Sinalética, em bloco, vertical | Cartazes, títulos de eventos |
| Michroma | Larga, técnica, futurista | Tecnologia e desporto motorizado |
| Monoton | Estilo néon em linha, retro | Visuais dos anos oitenta e disco |

Quatro fontes de exibição grátis no Google Fonts que seguram bem um gradiente cromado. Todas são de exibição: nunca as uses em texto corrido.

Para mais opções, [fontes de exibição](https://gradiently.design/pt-pt/guide/display-fonts) lista fontes pesadas por ambiente, e [efeito de texto retro](https://gradiently.design/pt-pt/guide/retro-text-effect) junta o cromado a contornos e extrusão para um tratamento completo dos anos oitenta.

## Acertar no cromado

### Parece falso

- Um esbatido suave de cinzento claro a escuro
- Horizonte no topo ou no fundo
- Cromado em texto fino ou pequeno
- Sem contorno, por isso as letras se fundem com o fundo
- Halos de brilho suave à volta das letras

### Parece metal

- Um degrau de horizonte seco logo abaixo do meio
- Céu claro em cima, chão escuro em baixo
- Letra de exibição pesada em tamanhos de título
- Um contorno escuro fino e uma sombra deslocada seca
- Um fundo liso escuro ou em gradiente, com espaço à volta da palavra

Usa o cromado numa palavra ou num título curto, nunca num parágrafo. É um tratamento de título para capas de álbuns, cartazes de eventos, merchandising, canais de jogos e campanhas nostálgicas. Num fundo carregado desaparece, por isso dá-lhe 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 letra cromada precisa para se ler como metal.

Um story vertical de uma noite de clube intitulado Night Drive com uma linha de detalhe simples por baixo

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

No Gradiently, tratamentos de letra como Extrusão, Interior e Contorno dão a letra de título profundidade, uma linha gravada ou um contorno sobre um Mark vivo, o que serve bem os visuais metálicos, e o Mark guarda a sua zona mais calma atrás das palavras para um título brilhante nunca lutar com um fundo carregado. Para um brilho iridescente e não de metal espelhado, vê [gradiente holográfico](https://gradiently.design/pt-pt/guide/holographic-gradients).

## FAQ

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

Usa um gradiente vertical com uma faixa de céu pálida, um horizonte escuro e seco logo abaixo do meio e uma faixa de chão mais clara; depois recorta-o em letra pesada e acrescenta um contorno escuro fino.

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

Define um gradiente linear cromado como fundo e usa `background-clip: text` com `-webkit-text-fill-color: transparent`. Acrescenta `filter: drop-shadow()` para uma sombra deslocada e seca.

### Que cores formam um gradiente cromado?

Quase branco, cinzento-azulado pálido, um carvão muito escuro no horizonte, cinzento médio e um realce brilhante perto do fundo. Tinge o céu de azul, rosa ou violeta para versões retro.

### Que fontes funcionam melhor para texto cromado?

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

### Qual é a diferença entre cromado e prateado?

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