# Guldgradient: koder för metalliskt guld som ser äkta ut

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

Det mesta digitala guldet ser ut som apelsinjuice eller senap. Äkta guld är mest brun skugga, lite ockra och ett blekt ljusglimt. Här är koder som gör rätt, och skälen till att de fungerar.

## The short version

- En realistisk guldgradient går från en djupbrun skugga via en dämpad ockra som mellanton till en blek gräddvit högdager och sedan tillbaka till skugga.
- Guld ser orange ut när färgerna är för mättade och för röda, och som platt gult när det saknar en mörk skugga och en nästan vit högdager.
- Metalliskt guld bygger på kontrast: de mörkaste och ljusaste stoppen ska ligga långt ifrån varandra i ljushet, med högdagern smal.
- I CSS är guldtext en linjär guldgradient som klipps till bokstäverna med background-clip: text.
- Guld ser mest dyrbart ut när det används sparsamt, på en mörk grund som svart, marinblått eller djupgrönt.

En **guldgradient** ser ut som äkta metall när den täcker ett brett ljushetsomfång: en djupbrun skugga, en dämpad ockra i mitten, en smal blek gräddvit högdager och sedan ner till brunt igen. Den klassiska koden att utgå från är `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. De flesta guldgradienter misslyckas för att de använder två klara gula och orangea toner utan riktig skugga eller högdager, vilket läses som orange färg i stället för metall.

## Guldgradientkoder du kan kopiera

- Klassiskt 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%)`
- Roséguld: `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%)`
- Klar guldfolie: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Guldljus på svart: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Sex guldtoner, var och en med en mörk skugga och en smal ljus högdager. De fem första är till text, ramar och former, den sista är en bakgrund.

- Skuggbrons: #5c3d12
- Djup ockra: #7a5418
- Gammalt guld: #b8862b
- Metalliskt guld: #c79a3c
- Blek högdager: #f3dc9a
- Spegelgrädde: #fff6dc

Guldfärgkoderna bakom Klassiskt guld, från skugga till högdager, plus en spegelgrädde att bara använda i en smal strimma, om alls.

## Varför din guldgradient ser orange ut

På skärmar är guld en illusion gjord av kontrast. Det finns ingen guldpixel, bara bruna och gula toner som ordnats så att ögat läser en reflekterande yta. När något går fel går det vanligtvis fel på ett av fyra sätt.

| Det ser ut som | Varför | Åtgärd |
| --- | --- | --- |
| Orange | Mellantonerna är för röda och för mättade | Flytta nyanserna mot gulockra och sänk mättnaden |
| Platt gult | Ingen mörk skugga, ingen blek högdager | Lägg till ett brunt stopp nära ändarna och ett gräddvitt stopp i mitten |
| Brunt eller lerigt | Högdagern är för mörk, för många matta stopp | Lyft högdagern nära grädde och gör de mörka zonerna smalare |
| Grönaktigt | Gulen är för kalla, skuggorna för grå | Värm skuggorna till brunt i stället för oliv eller grått |

De fyra klassiska guldmisstagen och hur du åtgärdar vart och ett.

Orange-problemet är vanligast eftersom det gula du väljer i en färgväljare ofta ser för blekt ut, så folk skjuter det varmare. Stå emot: håll mellantonens nyans kring ockra, ungefär där gult möter brunt, och låt kontrasten ge glansen. Om det du egentligen vill ha är en enkel varm gradient täcker [gul gradient](https://gradiently.design/sv/guide/yellow-gradient) och [orange gradient](https://gradiently.design/sv/guide/orange-gradient) just det.

## Så ljussätter du guld så att det ser äkta ut

1. **Börja med skuggan** Välj ett djupt, varmt brunt. Det ska vara så mörkt att vit text går att läsa på det.
2. **Lägg till en dämpad mellanton** Ett ockraguld, lätt avmättat. Det är den färg folk kommer ihåg, så det mesta av ytan ligger här.
3. **Placera en smal högdager** En blek grädde i ett tunt band, utanför mitten. Ju smalare den är, desto blankare ser metallen ut.
4. **Gå tillbaka till skugga** Fall tillbaka till en mörkare ockra efter högdagern, så att ljuset läses som en reflektion på en böjd yta.
5. **Lägg till en andra, svagare högdager** Valfritt: en mjukare lyftning nära den bortre änden, som om ett andra ljus fångar kanten. Det får platta former att kännas rundade.

Guld reflekterar som all polerad metall, så samma logik bakom [kromtexteffekt](https://gradiently.design/sv/guide/chrome-effect) gäller, bara varmare och med mjukare övergångar. Guldgradienter med långa, subtila sträckor kan visa bandning efter komprimering. [Gradientbandning](https://gradiently.design/sv/guide/gradient-banding) förklarar hur ett fint korn förhindrar det.

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

Rubriktext i guld och en tunn guldavdelare. Reservfärgen syns där gradientklippning inte stöds.

Guldgradienter passar serifer och högkontrasttypsnitt i stora storlekar. Under ungefär 24 pixlar flyter skuggan och högdagern ihop till en jämn brun, så sätt liten text i en enfärgad guldton som `#c79a3c` i stället och kontrollera dess kontrast mot bakgrunden. [Gradienttext](https://gradiently.design/sv/guide/css-gradient-text) går igenom webbläsarstödet för klippningstekniken.

## Guldgradienter i tryck

En guldgradient är en bild av metall, inte metall. Trycks den i vanlig fyrfärgsfärg blir det bruna och gula toner som antyder glans, vilket duger för flygblad och affischer men aldrig blir riktigt reflekterande. För inbjudningar, visitkort och förpackningar där äkta glans spelar roll använder tryckerier metallisk färg eller folieprägling, och du levererar guldytan som en separat platt form i originalet.

Om du trycker en gradient, räkna med att den blir något mörkare och mindre levande än på skärmen. Gör högdagern lite ljusare, undvik mycket långa subtila sträckor som kan få band och be om ett provtryck före en stor upplaga.

## Designa med guld

Guld läses som dyrbart när det är sällsynt. En tunn ram, ett monogram, ett ord i en rubrik, en avdelarlinje: på en mörk grund av svart, marinblått, oxblodsrött eller djupgrönt. Täck en hel affisch med guld och den blir mässingsaktig. [Svart och guld gradient](https://gradiently.design/sv/guide/black-and-gold-gradient) har kombinationer för den mest klassiska paringen, och [lyxig varumärkesdesign](https://gradiently.design/sv/guide/luxury-design) visar hur guld passar in i en återhållsam identitet.

En stående galainbjudan på mörk bakgrund med varmt guldljus och gräddvit text

En inbjudan i 5×7 tum: en mörk grund med varmt metalliskt ljus och ord i lugn grädde.

Ett stående smyckesinlägg med en kort rad på en djup yta berörd av guldljus

Ett smyckesinlägg där guld bara syns som ljus på ytan, aldrig som en stor platt fyllning.

För ett varmt utseende som finns bakom varje design i stället för att byggas om varje gång, sök i Gradiently-Marknaden med färgord som ”varmt guld” eller ”brons”. Varje Mark är en levande bakgrund med ljus och korn, som bara kan ha en ägare åt gången och håller sitt lugnaste område bakom dina ord i varje storlek.

## FAQ

### Vilken är den bästa guldgradientkoden?

En bra utgångspunkt är `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: brun skugga, ockra som mellanton, blek högdager och tillbaka till skugga.

### Vilka hexkoder ger ett metalliskt guld?

Kombinera en mörk brons som #5c3d12, ett gammalt guld som #b8862b, ett metalliskt guld som #c79a3c och en blek högdager som #f3dc9a.

### Varför ser min guldgradient orange ut?

Mellantonerna är för röda och mättade. Flytta dem mot gulockra, sänk mättnaden och lägg till en mörkbrun skugga och en blek gräddvit högdager för kontrast.

### Hur gör jag guldtext i CSS?

Lägg en linjär guldgradient som bakgrund och använd sedan `background-clip: text` och `-webkit-text-fill-color: transparent`, med en enfärgad guld-`color` som reserv.

### Vilken färg passar bäst ihop med guld?

Svart, marinblått, djupgrönt, oxblodsrött och varm grädde. Mörka grunder får guld att se klarast och mest dyrbart ut.