# Gradiente oro: codici per un oro metallico che sembra vero

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

Quasi tutto l’oro digitale sembra succo d’arancia o senape. L’oro vero è soprattutto ombra marrone, un po’ di ocra e un solo lampo di luce pallida. Ecco i codici giusti e perché funzionano.

## The short version

- Un gradiente oro realistico va da un’ombra marrone scuro, passa per un tono medio ocra spento e arriva a un riflesso crema pallido, poi torna all’ombra.
- L’oro sembra arancione quando i colori sono troppo saturi e troppo rossi, e sembra un giallo piatto quando mancano un’ombra scura e un riflesso quasi bianco.
- L’oro metallico dipende dal contrasto: i passaggi più scuro e più chiaro devono essere molto distanti in luminosità, con il riflesso tenuto stretto.
- In CSS il testo oro è un gradiente lineare oro ritagliato sulle lettere con background-clip: text.
- L’oro appare più prezioso se usato con parsimonia, su un fondo scuro come nero, blu notte o verde profondo.

Un **gradiente oro** sembra metallo vero quando copre un’ampia gamma di luminosità: un’ombra marrone scuro, un centro ocra spento, un riflesso stretto di crema pallido e di nuovo giù verso il marrone. Il codice classico da cui partire è `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. La maggior parte dei gradienti oro fallisce perché usa due gialli e arancioni accesi senza vera ombra né riflesso, e si legge come vernice arancione e non come metallo.

## Codici di gradiente oro da copiare

- Oro classico: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Oro champagne: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Oro rosa: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Oro antico: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Lamina d’oro brillante: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Luce oro su nero: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Sei ori, ciascuno con un’ombra scura e uno stretto riflesso chiaro. I primi cinque sono per testo, bordi e forme; l’ultimo è uno sfondo.

- Bronzo d’ombra: #5c3d12
- Ocra profondo: #7a5418
- Oro vecchio: #b8862b
- Oro metallico: #c79a3c
- Riflesso pallido: #f3dc9a
- Crema speculare: #fff6dc

I codici colore dell’oro dietro l’Oro classico, dall’ombra al riflesso, più una crema speculare da usare solo in una striscia sottile, se proprio.

## Perché il tuo gradiente oro sembra arancione

Sugli schermi l’oro è un’illusione fatta di contrasto. Non esiste un pixel oro, solo marroni e gialli disposti in modo che l’occhio legga una superficie riflettente. Quando qualcosa va storto, di solito va storto in uno di questi quattro modi.

| Sembra | Perché | Soluzione |
| --- | --- | --- |
| Arancione | Toni medi troppo rossi e troppo saturi | Sposta le tonalità verso l’ocra giallo e abbassa la saturazione |
| Giallo piatto | Nessuna ombra scura, nessun riflesso pallido | Aggiungi un passaggio marrone vicino alle estremità e uno crema al centro |
| Marrone o sporco | Riflesso troppo scuro, troppi passaggi spenti | Alza il riflesso fino a una crema e stringi le zone scure |
| Verdastro | Gialli troppo freddi, ombre troppo grigie | Scalda le ombre verso il marrone, non verso l’oliva o il grigio |

I quattro classici errori dell’oro e come correggere ciascuno.

Il problema dell’arancione è il più comune perché il giallo scelto in un selettore di colore spesso sembra troppo pallido, e allora si spinge verso il caldo. Resisti: tieni la tonalità del tono medio attorno all’ocra, più o meno dove il giallo incontra il marrone, e lascia al contrasto il compito di far brillare. Se ciò che vuoi davvero è una semplice sfumatura calda, il [gradiente giallo](https://gradiently.design/it/guide/yellow-gradient) e il [gradiente arancione](https://gradiently.design/it/guide/orange-gradient) trattano proprio quei casi.

## Come illuminare l’oro perché sembri vero

1. **Parti dall’ombra** Scegli un marrone caldo e profondo. Deve essere abbastanza scuro da far leggere del testo bianco sopra.
2. **Aggiungi un tono medio spento** Un oro ocra, leggermente desaturato. È il colore che le persone ricorderanno, quindi gran parte della superficie sta qui.
3. **Inserisci un riflesso stretto** Una crema pallida in una banda sottile, fuori centro. Più è stretta, più il metallo sembra lucido.
4. **Torna all’ombra** Dopo il riflesso ricadi su un ocra più scuro, così la luce si legge come un riflesso su una superficie curva.
5. **Aggiungi un secondo riflesso, più debole** Facoltativo: un’illuminazione più morbida verso l’altra estremità, come se una seconda luce colpisse il bordo. Fa sembrare tonde le forme piatte.

L’oro riflette come ogni metallo lucidato, quindi vale la stessa logica dell’[effetto testo cromato](https://gradiently.design/it/guide/chrome-effect), solo più calda e con transizioni più morbide. I gradienti oro con passaggi lunghi e sottili possono mostrare banding dopo la compressione; il [banding dei gradienti](https://gradiently.design/it/guide/gradient-banding) spiega come una grana fine lo previene.

## Testo oro in 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);
}
```

Un titolo in testo oro e un sottile divisore dorato. Il colore di ripiego compare dove il ritaglio del gradiente non è supportato.

I gradienti oro stanno bene con caratteri serif e ad alto contrasto in corpo grande. Sotto i 24 pixel circa, ombra e riflesso si fondono in un marrone uniforme, quindi per il testo piccolo usa un oro pieno come `#c79a3c` e controlla il contrasto con lo sfondo. Il [testo con gradiente](https://gradiently.design/it/guide/css-gradient-text) tratta il supporto dei browser per la tecnica del ritaglio.

## Gradienti oro in stampa

Un gradiente oro è l’immagine di un metallo, non il metallo. Stampato con i normali inchiostri in quadricromia esce come marroni e gialli che suggeriscono lucentezza: va bene per volantini e manifesti ma non è mai davvero riflettente. Per inviti, biglietti da visita e confezioni in cui conta la vera lucentezza, i tipografi usano inchiostri metallici o stampa a caldo con lamina, e tu consegni l’area oro come forma piatta separata nel file.

Se stampi un gradiente, aspettati che esca un po’ più scuro e meno vivido che a schermo. Schiarisci un poco il riflesso, evita passaggi molto lunghi e sottili che possono formare bande e chiedi una prova prima di una grande tiratura.

## Progettare con l’oro

L’oro si legge come prezioso quando è raro. Un bordo sottile, un monogramma, una parola di un titolo, una linea di divisione: su un fondo scuro di nero, blu notte, rosso bue o verde profondo. Copri un intero manifesto d’oro e diventa ottone. Il [gradiente nero e oro](https://gradiently.design/it/guide/black-and-gold-gradient) ha abbinamenti per la combinazione più classica, e il [design di lusso](https://gradiently.design/it/guide/luxury-design) mostra come l’oro entra in un’identità sobria.

Un invito verticale a un gala su sfondo scuro con calda luce dorata e testo color crema

Un invito 5×7 pollici: un fondo scuro con luce metallica calda e parole in una crema tranquilla.

Un post verticale di gioielleria con una breve riga su una superficie profonda sfiorata da luce dorata

Un post di gioielleria in cui l’oro compare solo come luce sulla superficie, mai come grande campitura piatta.

Per un aspetto caldo che vive dietro ogni design invece di essere ricostruito ogni volta, cerca nel Mercato di Gradiently con parole di colore come «oro caldo» o «bronzo». Ogni Mark è uno sfondo vivo con luce e grana, che può avere un solo proprietario alla volta e tiene la sua area più calma dietro le tue parole a ogni misura.

## FAQ

### Qual è il miglior codice per un gradiente oro?

Un buon punto di partenza è `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: ombra marrone, tono medio ocra, riflesso pallido e ritorno all’ombra.

### Quali codici esadecimali danno un oro metallico?

Combina un bronzo scuro come #5c3d12, un oro vecchio come #b8862b, un oro metallico come #c79a3c e un riflesso pallido come #f3dc9a.

### Perché il mio gradiente oro sembra arancione?

I toni medi sono troppo rossi e saturi. Spostali verso l’ocra giallo, abbassa la saturazione e aggiungi un’ombra marrone scuro e un riflesso crema pallido per il contrasto.

### Come creo un testo oro in CSS?

Applica un gradiente lineare oro come sfondo, poi usa `background-clip: text` e `-webkit-text-fill-color: transparent`, con un `color` oro pieno come ripiego.

### Quale colore sta meglio con l’oro?

Nero, blu notte, verde profondo, rosso bue e crema calda. I fondi scuri fanno apparire l’oro più luminoso e prezioso.