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

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

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.

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 och orange gradient just det.

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

1. 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. 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. 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. 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. 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 gäller, bara varmare och med mjukare övergångar. Guldgradienter med långa, subtila sträckor kan visa bandning efter komprimering. Gradientbandning förklarar hur ett fint korn förhindrar det.

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

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 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 har kombinationer för den mest klassiska paringen, och lyxig varumärkesdesign visar hur guld passar in i en återhållsam identitet.

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.