Efeito de texto cromado: letras e fundos metálicos

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

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 trata dessa época, e gradiente prateado 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 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 numa aplicação de design

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

Para mais opções, fontes de exibição lista fontes pesadas por ambiente, e efeito de texto retro junta o cromado a contornos e extrusão para um tratamento completo dos anos oitenta.

Acertar no cromado

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.

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.