# Gullgradient: koder for metallisk gull som ser ekte ut

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

Det meste av digitalt gull ser ut som appelsinjuice eller sennep. Ekte gull er for det meste brun skygge, litt oker og ett blekt glimt av lys. Her er koder som treffer, og grunnene til at de virker.

## The short version

- En realistisk gullgradient går fra en dyp brun skygge via en dempet okerfarget mellomtone til et blekt kremfarget høylys, og så tilbake til skygge.
- Gull ser oransje ut når fargene er for mettede og for røde, og som flat gul når det mangler en mørk skygge og et nesten hvitt høylys.
- Metallisk gull avhenger av kontrast: det mørkeste og det lyseste stoppet bør ligge langt fra hverandre i lyshet, med et smalt høylys.
- I CSS er gulltekst en lineær gullgradient klippet til bokstavene med background-clip: text.
- Gull ser mest eksklusivt ut når det brukes sparsomt, på en mørk bunn som svart, marineblå eller dyp grønn.

En **gullgradient** ser ut som ekte metall når den dekker et bredt spenn i lyshet: en dyp brun skygge, en dempet okerfarget midte, et smalt blekt kremfarget høylys og ned til brunt igjen. Den klassiske koden å starte fra er `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. De fleste gullgradienter mislykkes fordi de bruker to klare gule og oransje toner uten ekte skygge eller høylys, og det leses som oransje maling og ikke som metall.

## Gullgradienter du kan kopiere

- Klassisk gull: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Champagnegull: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Rosegull: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Antikkgull: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Klar gullfolie: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Gullys på svart: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Seks gulltoner, hver med en mørk skygge og et smalt lyst høylys. De fem første er til tekst, kanter og former; den siste er en bakgrunn.

- Bronseskygge: #5c3d12
- Dyp oker: #7a5418
- Gammelt gull: #b8862b
- Metallisk gull: #c79a3c
- Blekt høylys: #f3dc9a
- Speilende krem: #fff6dc

Gullfargekodene bak Klassisk gull, fra skygge til høylys, pluss en speilende kremtone som bare skal brukes i en smal stripe, om i det hele tatt.

## Hvorfor gullgradienten din ser oransje ut

På skjermen er gull en illusjon laget av kontrast. Det finnes ingen gullpiksel, bare brune og gule toner ordnet slik at øyet leser en reflekterende flate. Når noe går galt, går det som regel galt på en av fire måter.

| Det ser | Hvorfor | Løsning |
| --- | --- | --- |
| Oransje ut | Mellomtonene er for røde og for mettede | Flytt fargetonene mot gul oker og senk metningen |
| Flatt gult ut | Ingen mørk skygge, ikke noe blekt høylys | Legg til et brunt stopp nær endene og et kremfarget stopp i midten |
| Brunt eller grumsete ut | Høylyset er for mørkt, for mange matte stopp | Løft høylyset nær krem og gjør de mørke sonene smalere |
| Grønnaktig ut | De gule er for kalde, skyggene for grå | Varm opp skyggene mot brunt i stedet for oliven eller grått |

De fire klassiske gullfeilene og hvordan du retter hver av dem.

Det oransje problemet er det vanligste, fordi den gule du velger i en fargevelger, ofte ser for blek ut, så folk dytter den varmere. La være: hold mellomtonen rundt oker, omtrent der gult møter brunt, og la kontrasten gi glansen. Hvis det du egentlig vil ha, er en enkel varm overgang, dekker [gul gradient](https://gradiently.design/nb/guide/yellow-gradient) og [oransje gradient](https://gradiently.design/nb/guide/orange-gradient) det direkte.

## Slik lyssetter du gull så det ser ekte ut

1. **Start med skyggen** Velg en dyp, varm brun. Den bør være mørk nok til at hvit tekst kan leses på den.
2. **Legg til én dempet mellomtone** Et okerfarget gull, litt avmettet. Dette er fargen folk husker, så det meste av flaten ligger her.
3. **Plasser et smalt høylys** En blek krem i et tynt bånd, utenfor midten. Jo smalere det er, desto blankere ser metallet ut.
4. **Gå tilbake til skygge** Fall tilbake til en mørkere oker etter høylyset, så lyset leses som en refleks på en buet flate.
5. **Legg til et svakere høylys nummer to** Valgfritt: et mykere løft nær den andre enden, som om en lyskilde til treffer kanten. Det får flate former til å føles avrundede.

Gull reflekterer som alt polert metall, så den samme logikken som ligger bak [kromeffekt på tekst](https://gradiently.design/nb/guide/chrome-effect), gjelder her, bare varmere og med mykere overganger. Gullgradienter med lange, subtile partier kan få striper etter komprimering; [striper i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer hvordan fint korn forhindrer det.

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

Overskrift i gull og en tynn skillelinje i gull. Reservefargen vises overalt der klipping av gradienter ikke støttes.

Gullgradienter passer til seriffer og skrift med høy kontrast i store størrelser. Under omtrent 24 piksler flyter skygge og høylys sammen til en jevn brun, så sett liten tekst i en ensfarget gulltone som `#c79a3c` i stedet, og sjekk kontrasten mot bakgrunnen. [Gradienttekst](https://gradiently.design/nb/guide/css-gradient-text) tar for seg nettleserstøtten for klippeteknikken.

## Gullgradienter på trykk

En gullgradient er et bilde av metall, ikke metall. Trykket med vanlige fire farger blir den til brune og gule toner som antyder glans, og det holder fint til flyers og plakater, men den blir aldri virkelig reflekterende. Til invitasjoner, visittkort og emballasje der ekte glans betyr noe, bruker trykkerier metallisk blekk eller foliepreg, og du leverer gullområdet som en egen flat form i trykkfilen.

Hvis du likevel trykker en gradient, må du regne med at den blir litt mørkere og mindre livlig enn på skjermen. Gjør høylyset litt lysere, unngå svært lange subtile partier som kan få striper, og be om et prøvetrykk før et stort opplag.

## Å designe med gull

Gull leses som eksklusivt når det er sjeldent. En tynn kant, et monogram, ett ord i en overskrift, en skillelinje: på en mørk bunn av svart, marineblå, oksblodrød eller dyp grønn. Dekk en hel plakat med gull, og den blir messingaktig. [Svart og gull gradient](https://gradiently.design/nb/guide/black-and-gold-gradient) har kombinasjoner for den mest klassiske sammensetningen, og [design for luksusmerker](https://gradiently.design/nb/guide/luxury-design) viser hvordan gull passer inn i en stram identitet.

En stående gallainvitasjon på mørk bakgrunn med varmt gullys og kremfarget tekst

En invitasjon på 5×7 tommer: en mørk bunn med varmt metallisk lys, og ord satt i rolig krem.

Et stående smykkeinnlegg med en kort linje på en dyp flate berørt av gullys

Et smykkeinnlegg der gull bare viser seg som lys på flaten, aldri som en stor flat fylling.

Vil du ha et varmt uttrykk som ligger bak hvert design i stedet for å bygges på nytt hver gang, kan du søke i Gradiently-Markedet med fargeord som «varmt gull» eller «bronse». Hver Mark er en levende bakgrunn med lys og korn, som bare kan ha én eier om gangen og holder det roligste området bak ordene dine i alle størrelser.

## FAQ

### Hva er den beste gullgradientkoden?

Et godt utgangspunkt er `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: brun skygge, okerfarget mellomtone, blekt høylys og tilbake til skygge.

### Hvilke hex-koder gir metallisk gull?

Kombiner en mørk bronse som #5c3d12, et gammelt gull som #b8862b, et metallisk gull som #c79a3c og et blekt høylys som #f3dc9a.

### Hvorfor ser gullgradienten min oransje ut?

Mellomtonene er for røde og mettede. Flytt dem mot gul oker, senk metningen og legg til en mørk brun skygge og et blekt kremfarget høylys for kontrast.

### Hvordan lager jeg gulltekst i CSS?

Bruk en lineær gullgradient som bakgrunn, og deretter `background-clip: text` og `-webkit-text-fill-color: transparent`, med en ensfarget gull-`color` som reserve.

### Hvilken farge passer best til gull?

Svart, marineblå, dyp grønn, oksblodrød og varm krem. Mørke bunner får gull til å se lysest og mest eksklusivt ut.