# Gradiente dourado: códigos de ouro metálico que parece de verdade

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

A maior parte do ouro digital parece suco de laranja ou mostarda. O ouro de verdade é sobretudo sombra marrom, um pouco de ocre e um clarão de luz pálida. Veja códigos que acertam e por que funcionam.

## The short version

- Um gradiente dourado realista vai de uma sombra marrom profunda, passando por um tom médio de ocre apagado, a um realce de creme pálido, e depois volta à sombra.
- O ouro parece laranja quando as cores são saturadas e vermelhas demais, e parece amarelo chapado quando falta uma sombra escura e um realce quase branco.
- O ouro metálico depende de contraste: as paradas mais escura e mais clara devem ter brilhos bem distantes, com o realce mantido estreito.
- Em CSS, o texto dourado é um gradiente linear dourado recortado nas letras com background-clip: text.
- O ouro parece mais precioso quando usado com moderação, sobre um fundo escuro como preto, azul-marinho ou verde profundo.

Um **gradiente dourado** parece metal de verdade quando cobre uma ampla faixa de luminosidade: uma sombra marrom profunda, um meio de ocre apagado, um realce estreito de creme pálido e a volta ao marrom. 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 realce de verdade, o que parece tinta laranja e não metal.

## Códigos de gradiente dourado para copiar

- Ouro clássico: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Ouro champanhe: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Ouro rosé: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Ouro antigo: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Folha de ouro brilhante: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Luz dourada sobre preto: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Seis dourados, cada um com uma sombra escura e um realce estreito de luz. Os cinco primeiros servem para texto, bordas e formas; o último é um fundo.

- Bronze de sombra: #5c3d12
- Ocre profundo: #7a5418
- Ouro velho: #b8862b
- Ouro metálico: #c79a3c
- Realce pálido: #f3dc9a
- Creme especular: #fff6dc

Os códigos de cor por trás do Ouro clássico, da sombra ao realce, mais um creme especular para usar só numa lasca, se tanto.

## Por que seu gradiente dourado parece laranja

Nas telas, o ouro é uma ilusão feita de contraste. Não existe pixel dourado, só marrons e amarelos arranjados para que o olho leia uma superfície refletora. Quando algo dá errado, em geral dá errado de uma entre quatro maneiras.

| Parece | Por quê | Correção |
| --- | --- | --- |
| Laranja | Tons médios vermelhos e saturados demais | Mova os matizes para o amarelo-ocre e reduza a saturação |
| Amarelo chapado | Sem sombra escura, sem realce pálido | Acrescente uma parada marrom perto das pontas e uma de creme no meio |
| Marrom ou sujo | Realce escuro demais, paradas opacas demais | Levante o realce até perto do creme e estreite as zonas escuras |
| Esverdeado | Amarelos frios demais, sombras cinzentas demais | Esquente as sombras para marrom, em vez de oliva ou cinza |

As quatro falhas clássicas do ouro e como corrigir cada uma.

O problema do laranja é o mais comum porque o amarelo escolhido num seletor de cores costuma parecer pálido demais, e as pessoas o esquentam. Resista: mantenha o matiz do tom médio em torno do ocre, mais ou menos onde o amarelo encontra o marrom, e deixe o contraste dar o brilho. Se o que você quer mesmo é uma mistura quente simples, [gradiente amarelo](https://gradiently.design/pt-br/guide/yellow-gradient) e [gradiente laranja](https://gradiently.design/pt-br/guide/orange-gradient) tratam direto disso.

## Como iluminar o ouro para que pareça real

1. **Comece pela sombra** Escolha um marrom quente e profundo. Ele deve ser escuro o bastante para que um texto branco se leia sobre ele.
2. **Acrescente um tom médio apagado** Um dourado ocre, levemente dessaturado. É a cor de que as pessoas vão se lembrar, então a maior parte da superfície fica aqui.
3. **Coloque um realce estreito** Um creme pálido numa faixa fina, fora do centro. Quanto mais estreito, mais brilhante o metal parece.
4. **Volte à sombra** Recue para um ocre mais escuro depois do realce, para que a luz se leia como reflexo numa superfície curva.
5. **Acrescente um segundo realce, mais fraco** Opcional: um leve brilho perto da outra ponta, como se uma segunda luz pegasse a borda. Faz formas chapadas parecerem arredondadas.

O ouro reflete como qualquer metal polido, então vale a mesma lógica do [efeito de texto cromado](https://gradiently.design/pt-br/guide/chrome-effect), só que mais quente e com transições mais suaves. Gradientes dourados com trechos longos e sutis podem mostrar faixas após a compressão; [faixas em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica como uma granulação fina evita isso.

## Texto dourado em CSS

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

Texto de título dourado e um divisor dourado fino. A cor de reserva aparece onde o recorte por gradiente não é suportado.

Gradientes dourados combinam com fontes serifadas e de alto contraste em tamanhos grandes. Abaixo de cerca de 24 pixels, a sombra e o realce se misturam num marrom uniforme, então use texto pequeno num tom dourado sólido como `#c79a3c` e confira o contraste com o fundo. [Texto com gradiente](https://gradiently.design/pt-br/guide/css-gradient-text) trata do suporte dos navegadores à técnica de recorte.

## Gradientes dourados na impressão

Um gradiente dourado é uma imagem de metal, não metal. Impresso em tinta comum de quatro cores, ele sai como marrons e amarelos que sugerem brilho, o que é aceitável para flyers e pôsteres, mas nunca realmente reflexivo. Para convites, cartões de visita e embalagens em que o brilho de verdade importa, as gráficas usam tintas metálicas ou hot stamping, e você entrega a área dourada como uma forma chapada separada na arte.

Se você imprimir um gradiente, espere que saia um pouco mais escuro e menos vivo do que na tela. Clareie um pouco o realce, evite trechos sutis muito longos que podem formar faixas e peça uma prova antes de uma tiragem grande.

## Como projetar com ouro

O ouro parece precioso quando é raro. Uma borda fina, um monograma, uma palavra de um título, uma linha divisória: sobre um fundo escuro de preto, azul-marinho, vinho ou verde profundo. Cubra um pôster inteiro de ouro e ele vira latão. [Gradiente preto e dourado](https://gradiently.design/pt-br/guide/black-and-gold-gradient) tem combinações para a mais clássica das duplas, e [design de marca de luxo](https://gradiently.design/pt-br/guide/luxury-design) mostra como o ouro entra numa identidade contida.

Um convite vertical de gala sobre fundo escuro, com luz dourada quente e texto em creme

Um convite de 5×7 polegadas: fundo escuro com luz metálica quente e palavras em creme calmo.

Um post vertical de joalheria com uma frase curta sobre uma superfície profunda tocada por luz dourada

Um post de joalheria em que o ouro aparece só como luz na superfície, nunca como um grande preenchimento chapado.

Para um visual quente que vive atrás de cada design em vez de ser refeito toda vez, busque no Mercado do Gradiently com palavras de cor como “dourado quente” ou “bronze”. Cada Mark é um fundo vivo com luz e granulação, que só pode ter um dono por vez e mantém a área mais calma atrás das suas palavras em todos os tamanhos.

## FAQ

### Qual é o melhor código de gradiente dourado?

Um bom ponto de partida é `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: sombra marrom, tom médio de ocre, realce pálido e volta à sombra.

### Quais códigos hex fazem um ouro metálico?

Combine um bronze escuro como #5c3d12, um ouro velho como #b8862b, um ouro metálico como #c79a3c e um realce pálido como #f3dc9a.

### Por que meu gradiente dourado parece laranja?

Os tons médios estão vermelhos e saturados demais. Mova-os para o amarelo-ocre, reduza a saturação e acrescente uma sombra marrom escura e um realce de creme pálido para dar contraste.

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

Aplique um gradiente linear dourado como fundo, depois use `background-clip: text` e `-webkit-text-fill-color: transparent`, com uma `color` dourada sólida como reserva.

### Que cor combina melhor com dourado?

Preto, azul-marinho, verde profundo, vinho e creme quente. Fundos escuros fazem o ouro parecer mais brilhante e mais precioso.