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

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

Grande parte do ouro digital parece sumo de laranja ou mostarda. O ouro verdadeiro é sobretudo sombra castanha, um pouco de ocre e um só clarão pálido. Aqui ficam códigos certos e as razões por que funcionam.

## The short version

- Um gradiente dourado realista vai de uma sombra castanha profunda, passando por um tom médio de ocre suave, até um brilho creme pálido, e volta à sombra.
- O ouro parece laranja quando as cores são demasiado saturadas e avermelhadas, e parece amarelo chapado quando lhe faltam uma sombra escura e um brilho quase branco.
- O ouro metálico depende do contraste: as paragens mais escura e mais clara devem estar muito afastadas em luminosidade, com o brilho mantido estreito.
- Em CSS, o texto dourado é um gradiente linear dourado recortado nas letras com background-clip: text.
- O ouro parece mais precioso usado com moderação, sobre um fundo escuro como preto, azul-marinho ou verde profundo.

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

- Dourado clássico: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Dourado champanhe: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Ouro rosa: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Dourado 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 brilho estreito e claro. Os primeiros cinco servem para texto, contornos e formas; o último é um fundo.

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

Os códigos de cor por trás do dourado clássico, da sombra ao brilho, mais um creme especular para usar só numa faixa fina, se for caso disso.

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

| Parece | Porquê | Solução |
| --- | --- | --- |
| Laranja | Tons médios demasiado vermelhos e saturados | Desloca os matizes para o amarelo ocre e baixa a saturação |
| Amarelo chapado | Sem sombra escura nem brilho pálido | Acrescenta uma paragem castanha perto das pontas e uma creme no meio |
| Castanho ou lamacento | Brilho demasiado escuro, demasiadas paragens baças | Sobe o brilho para perto do creme e estreita as zonas escuras |
| Esverdeado | Amarelos demasiado frios, sombras demasiado cinzentas | Aquece as sombras para castanho em vez de oliva ou cinzento |

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

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](https://gradiently.design/pt-pt/guide/yellow-gradient) e [gradiente laranja](https://gradiently.design/pt-pt/guide/orange-gradient) tratam disso diretamente.

## Como iluminar o dourado para parecer real

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. **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. **Coloca um brilho estreito** Um creme pálido numa faixa fina, fora do centro. Quanto mais estreito, mais brilhante parece o metal.
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. **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](https://gradiently.design/pt-pt/guide/chrome-effect), 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](https://gradiently.design/pt-pt/guide/gradient-banding) explica como um grão fino o evita.

## 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 do gradiente não é suportado.

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](https://gradiently.design/pt-pt/guide/css-gradient-text) 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](https://gradiently.design/pt-pt/guide/black-and-gold-gradient) tem combinações para o par mais clássico, e [design de marcas de luxo](https://gradiently.design/pt-pt/guide/luxury-design) mostra como o ouro cabe numa identidade contida.

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

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

Uma publicação vertical de joalharia com uma linha curta sobre uma superfície profunda tocada por luz dourada

Uma publicação de joalharia em que o ouro aparece só como luz na superfície, nunca como um grande preenchimento liso.

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.

## FAQ

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

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

### Que códigos hexadecimais dão um ouro metálico?

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

### Porque é que o meu gradiente dourado parece laranja?

Os tons médios são demasiado vermelhos e saturados. Desloca-os para o amarelo ocre, baixa a saturação e acrescenta uma sombra castanha escura e um brilho creme pálido para ganhar contraste.

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

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

### Que cor combina melhor com o dourado?

Preto, azul-marinho, verde profundo, bordô e creme quente. Os fundos escuros fazem o ouro parecer mais brilhante e mais precioso.