# Guldgradient: koder til metallisk guld, der ser ægte ud

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

Det meste digitale guld ligner appelsinjuice eller sennep. Ægte guld er mest brun skygge, lidt okker og ét bleg lysglimt. Her er koder, der rammer rigtigt, og grundene til, at de virker.

## The short version

- En realistisk guldgradient går fra en dyb brun skygge over en dæmpet okkerfarvet mellemtone til et blegt cremefarvet højlys og så tilbage til skygge.
- Guld ser orange ud, når farverne er for mættede og for røde, og ligner flad gul, når det mangler en mørk skygge og et næsten hvidt højlys.
- Metallisk guld afhænger af kontrast: de mørkeste og lyseste stop skal ligge langt fra hinanden i lysstyrke, og højlyset skal holdes smalt.
- I CSS er guldtekst en guldfarvet lineær gradient, der er klippet til bogstaverne med background-clip: text.
- Guld ser mest kostbart ud, når det bruges sparsomt på en mørk bund som sort, marineblå eller dyb grøn.

En **guldgradient** ligner ægte metal, når den dækker et bredt spænd af lysstyrke: en dyb brun skygge, en dæmpet okkerfarvet midte, et smalt blegt cremefarvet højlys og så ned til brun igen. Den klassiske kode at tage udgangspunkt i er `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. De fleste guldgradienter fejler, fordi de bruger to klare gule og orange toner uden rigtig skygge eller højlys, og det læses som orange maling og ikke som metal.

## Guldgradientkoder, du kan kopiere

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

Seks guldtoner, hver med en mørk skygge og et smalt lyst højlys. De første fem er til skrift, kanter og former, den sidste er en baggrund.

- Bronzeskygge: #5c3d12
- Dyb okker: #7a5418
- Gammelt guld: #b8862b
- Metallisk guld: #c79a3c
- Blegt højlys: #f3dc9a
- Spejlende creme: #fff6dc

Guldfarvekoderne bag Klassisk guld, fra skygge til højlys, plus en spejlende creme, som kun skal bruges i en tynd stribe, hvis overhovedet.

## Hvorfor din guldgradient ser orange ud

På skærme er guld en illusion lavet af kontrast. Der findes ingen guldpixel, kun brune og gule toner, arrangeret så øjet læser en reflekterende flade. Når noget går galt, går det som regel galt på én af fire måder.

| Det ser ud som | Hvorfor | Løsning |
| --- | --- | --- |
| Orange | Mellemtoner, der er for røde og for mættede | Flyt nuancerne mod gul okker og sænk mætningen |
| Flad gul | Ingen mørk skygge, intet blegt højlys | Tilføj et brunt stop nær enderne og et cremefarvet stop i midten |
| Brun eller mudret | Højlyset er for mørkt, og der er for mange kedelige stop | Løft højlyset tæt på creme og gør de mørke zoner smallere |
| Grønlig | Gule toner, der er for kolde, og skygger, der er for grå | Varm skyggerne op til brun i stedet for oliven eller grå |

De fire klassiske guldfejl og hvordan du retter hver af dem.

Orange-problemet er det mest almindelige, fordi den gule, du vælger i en farvevælger, ofte ser for bleg ud, så folk skubber den varmere. Lad være: hold mellemtonens nuance omkring okker, cirka hvor gul møder brun, og lad kontrasten levere skinnet. Er det en almindelig varm overgang, du egentlig vil have, dækker [gul gradient](https://gradiently.design/da/guide/yellow-gradient) og [orange gradient](https://gradiently.design/da/guide/orange-gradient) dem direkte.

## Sådan belyser du guld, så det ser ægte ud

1. **Start fra skyggen** Vælg en dyb, varm brun. Den skal være mørk nok til, at hvid tekst kan læses på den.
2. **Tilføj én dæmpet mellemtone** En okkerfarvet guldtone, let afmættet. Det er den farve, folk husker, så det meste af fladen ligger her.
3. **Placér et smalt højlys** En bleg creme i et tyndt bånd, uden for midten. Jo smallere det er, jo mere skinnende ser metallet ud.
4. **Vend tilbage til skygge** Fald tilbage til en mørkere okker efter højlyset, så lyset læses som en refleksion på en buet flade.
5. **Tilføj et andet, svagere højlys** Valgfrit: et blødere løft nær den fjerne ende, som om et andet lys fanger kanten. Det får flade former til at føles runde.

Guld reflekterer som ethvert poleret metal, så den samme logik som bag [kromtekst-effekten](https://gradiently.design/da/guide/chrome-effect) gælder, bare varmere og med blødere overgange. Guldgradienter med lange, subtile forløb kan få bånd efter komprimering, og [bånddannelse i gradienter](https://gradiently.design/da/guide/gradient-banding) forklarer, hvordan fint korn forhindrer det.

## Guldtekst 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 guld og en tynd guldfarvet skillelinje. Reservefarven vises overalt, hvor gradientklipning ikke understøttes.

Guldgradienter passer til seriffer og skrift med høj kontrast i store størrelser. Under omkring 24 pixel udvisker skygge og højlys sig til en ensartet brun, så sæt lille tekst i en ensfarvet guldtone som `#c79a3c` i stedet, og tjek dens kontrast mod baggrunden. [Gradienttekst](https://gradiently.design/da/guide/css-gradient-text) dækker browserstøtten til klipningsteknikken.

## Guldgradienter på tryk

En guldgradient er et billede af metal, ikke metal. Trykt i almindelig firefarvet tryk bliver den til brune og gule toner, der antyder glans, hvilket er fint til flyers og plakater, men aldrig rigtig reflekterende. Til invitationer, visitkort og emballage, hvor ægte glans betyder noget, bruger trykkerier metalliske farver eller foliepræg, og du leverer guldområdet som en separat, flad form i grafikken.

Trykker du en gradient, så regn med, at den bliver en anelse mørkere og mindre levende end på skærmen. Gør højlyset en smule lysere, undgå meget lange, subtile forløb, der kan få bånd, og bed om en prøve, før du trykker et stort oplag.

## Design med guld

Guld læses som kostbart, når det er sjældent. En tynd kant, et monogram, ét ord i en overskrift, en skillelinje: på en mørk bund af sort, marineblå, okseblodsrød eller dyb grøn. Dækker du en hel plakat med guld, bliver den messingagtig. [Sort og guld gradient](https://gradiently.design/da/guide/black-and-gold-gradient) har kombinationer til den mest klassiske sammensætning, og [luksusbranding](https://gradiently.design/da/guide/luxury-design) viser, hvordan guld passer ind i en afdæmpet identitet.

En galainvitation i højformat på mørk baggrund med varmt guldlys og cremefarvet skrift

En invitation i 5×7 tommer: en mørk bund med varmt metallisk lys og ord sat i rolig creme.

Et smykkeopslag i højformat med en kort linje på en dyb flade, berørt af guldlys

Et smykkeopslag, hvor guld kun optræder som lys på fladen, aldrig som en stor flad udfyldning.

Vil du have et varmt udtryk, der ligger bag hvert design i stedet for at blive bygget forfra hver gang, så søg i Gradiently Markedet med farveord som »varmt guld« eller »bronze«. Hver Mark er en levende baggrund med lys og korn, som kun kan have én ejer ad gangen og holder sit roligste område bag dine ord i hver størrelse.

## FAQ

### Hvad er den bedste kode til en guldgradient?

Et godt udgangspunkt er `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: brun skygge, okkerfarvet mellemtone, blegt højlys og tilbage til skygge.

### Hvilke hex-koder giver et metallisk guld?

Kombinér en mørk bronze som #5c3d12, et gammelt guld som #b8862b, et metallisk guld som #c79a3c og et blegt højlys som #f3dc9a.

### Hvorfor ser min guldgradient orange ud?

Mellemtonerne er for røde og mættede. Flyt dem mod gul okker, sænk mætningen, og tilføj en mørkebrun skygge og et blegt cremefarvet højlys for kontrastens skyld.

### Hvordan laver jeg guldtekst i CSS?

Anvend en guldfarvet lineær gradient som baggrund, og brug så `background-clip: text` og `-webkit-text-fill-color: transparent`, med en ensfarvet guldtone som `color` som reserve.

### Hvilken farve passer bedst til guld?

Sort, marineblå, dyb grøn, okseblodsrød og varm creme. Mørke baggrunde får guld til at se klarest og mest kostbart ud.