Gradiente dourado: códigos de ouro metálico com aspeto real

Um gradiente dourado parece metal verdadeiro quando cobre uma grande gama de luminosidade: uma sombra castanha profunda, um meio de ocre suave, um brilho creme pálido e estreito, e de volta ao castanho. O código clássico para começar é linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418). A maioria dos gradientes dourados falha porque usa dois amarelos e laranjas vivos sem sombra nem brilho a sério, o que se lê como tinta laranja e não como metal.

Códigos de gradientes dourados para copiares

Porque é que o teu gradiente dourado parece laranja

Nos ecrãs, o ouro é uma ilusão feita de contraste. Não existe um píxel dourado, apenas castanhos e amarelos dispostos para que o olho leia uma superfície refletora. Quando algo corre mal, costuma correr mal de uma de quatro maneiras.

O problema do laranja é o mais comum porque o amarelo que escolhes num seletor de cor parece muitas vezes pálido demais, e as pessoas empurram-no para o quente. Resiste: mantém o matiz do tom médio em torno do ocre, mais ou menos onde o amarelo encontra o castanho, e deixa o contraste dar o brilho. Se o que queres mesmo é uma mistura quente simples, gradiente amarelo e gradiente laranja tratam disso diretamente.

Como iluminar o dourado para parecer real

1. 1

   Começa pela sombra

   Escolhe um castanho quente e profundo. Deve ser escuro o suficiente para que texto branco se leia sobre ele.

2. 2

   Acrescenta um tom médio suave

   Um dourado ocre, ligeiramente dessaturado. É a cor de que as pessoas se vão lembrar, por isso a maior parte da superfície fica aqui.

3. 3

   Coloca um brilho estreito

   Um creme pálido numa faixa fina, fora do centro. Quanto mais estreito, mais brilhante parece o metal.

4. 4

   Volta à sombra

   Desce para um ocre mais escuro depois do brilho, para que a luz se leia como reflexo numa superfície curva.

5. 5

   Acrescenta um segundo brilho, mais fraco

   Opcional: uma subida mais suave perto da outra ponta, como se uma segunda luz apanhasse a aresta. Faz as formas planas parecerem arredondadas.

O ouro reflete como qualquer metal polido, por isso aplica-se a mesma lógica do efeito de texto cromado, só que mais quente e com transições mais suaves. Gradientes dourados com percursos longos e subtis podem mostrar banding após a compressão; banding em gradientes explica como um grão fino o evita.

Texto dourado em CSS

.gold {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #c79a3c; /* fallback */
  background: linear-gradient(
    135deg,
    #5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
    #c79a3c 58%, #7a5418 80%, #d6b062 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-rule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}

Os gradientes dourados ficam bem em tipos com serifa e de alto contraste em tamanhos grandes. Abaixo de cerca de 24 píxeis a sombra e o brilho diluem-se num castanho uniforme, por isso compõe o texto pequeno num tom dourado sólido como #c79a3c e confirma o contraste com o fundo. Texto com gradiente trata do suporte dos navegadores para a técnica de recorte.

Gradientes dourados na impressão

Um gradiente dourado é uma imagem de metal, não metal. Impresso em tinta normal de quatro cores, sai em castanhos e amarelos que sugerem brilho, o que serve para folhetos e cartazes mas nunca é verdadeiramente refletor. Para convites, cartões de visita e embalagens onde o brilho a sério importa, as gráficas usam tintas metálicas ou estampagem a quente, e tu entregas a zona dourada como uma forma lisa à parte no artwork.

Se imprimires mesmo um gradiente, conta com que saia um pouco mais escuro e menos vivo do que no ecrã. Aviva um pouco o brilho, evita percursos muito longos e subtis que podem fazer banding e pede uma prova antes de uma tiragem grande.

Desenhar com ouro

O ouro parece precioso quando é raro. Um contorno fino, um monograma, uma palavra num título, uma linha divisória: sobre um fundo escuro de preto, azul-marinho, bordô ou verde profundo. Cobre um cartaz inteiro de ouro e fica com ar de latão. Gradiente preto e dourado tem combinações para o par mais clássico, e design de marcas de luxo mostra como o ouro cabe numa identidade contida.

Para um aspeto quente que vive por trás de cada design em vez de ser refeito de cada vez, pesquisa no Mercado do Gradiently com palavras de cor como “ouro quente” ou “bronze”. Cada Mark é um fundo vivo com luz e grão, que só pode ter um dono de cada vez e mantém a sua zona mais calma atrás das tuas palavras em todos os tamanhos.