Efeito de texto cromado: tipografia e fundos metálicos

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

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 trata dessa época, e gradiente prata 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 explica o método e o suporte dos navegadores com mais profundidade.

.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);
}

Texto cromado em um app de design

1. 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. 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. 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. 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.

Para mais opções, fontes display lista fontes pesadas por clima, e efeito de texto retrô combina cromado com contornos e extrusão para um tratamento anos 80 completo.

Como acertar o cromado

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.

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.