Silvergradient: metalliska koder och hur du ljussätter dem

En silvergradient ser ut som metall när den har tre saker som vanligt grått saknar: en svag sval ton, ett stort hopp mellan det mörkaste och ljusaste stoppet och en högdager som är smal snarare än utspridd. En pålitlig startkod är linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Nedan finns sex silvertoner att kopiera, ljusreglerna bakom dem och CSS för silvertext, knappar och borstad metall.

Koder för silvergradienter

Så ljussätter du en silvergradient

Silver, som all polerad metall, visar mest reflekterat ljus. Din gradient är en målad reflektion, så tänk på varifrån ljuset kommer och hur skarpt ytan fångar det.

1. 1

   Tona gråtonerna något svala

   Lägg till en aning blått i varje stopp, precis så mycket att grått inte längre ser ut som damm eller cement.

2. 2

   Gå mörkare än det känns rätt

   Metall behöver en djup skugga. Ditt mörkaste stopp ska vara en kanonmetall, inte ett mellangrått.

3. 3

   Håll högdagern smal

   Ett nästan vitt band över en liten del av gradienten läses som glans. Ett brett ljust område läses som en blekgrå yta.

4. 4

   Bestäm polerat eller satin

   För stoppen nära varandra för polerat silver med skarpa reflektioner; sprid ut dem för en mjuk satinyta.

Skruva kontrasten hela vägen, med en hård horisontlinje genom mitten, och silver blir spegelkrom; kromeffekt för text går igenom den versionen. För en varm metall med samma logik, se guldgradient.

Silver eller vanligt grått

Om du egentligen vill ha en lugn neutral yta snarare än metall är det ett annat jobb: grå gradient och monokrom gradient tar upp mjuka, tonala gråtoner för bakgrunder.

Vilken silveryta du ska använda

Varje yta säger något lite annorlunda, så välj den efter uppgiften snarare än av vana. Ett varumärke kan gott använda två, till exempel polerat silver för en logga och borstat silver för förpackningspaneler, så länge tonen förblir densamma.

Silvertext och knappar i CSS

.silver-text {
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #a7afb9; /* fallback */
  background: linear-gradient(
    135deg,
    #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
    #a7afb9 58%, #4b525c 82%, #9aa2ac 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-button {
  padding: 0.85rem 1.6rem;
  border: 1px solid #4b525c;
  border-radius: 999px;
  color: #1c2026;
  font-weight: 600;
  background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.silver-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}

.brushed {
  background:
    repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}

Knappen använder ett steg i mitten, från 48 % till 52 %, som läses som en horisont reflekterad i en böjd yta. CSS för gradientknapp har fler knappmönster, och gradienttext förklarar textbeskärning och dess stöd i olika webbläsare.

Designa med silver

Silver läses som modernt, svalt och precist, där guld läses som varmt och traditionellt. Det passar teknikföretags lanseringar, klockor och smycken, jubileer (silver är traditionellt det 25:e), vinterkampanjer och allt med en futuristisk kant. Liksom guld ser det mest värdefullt ut i små doser på en mörk botten: ett monogram, en tunn linje, en enda titel.

Silver passar också bra ihop med isblått och djup marin för en vinterpalett, och med svart och vitt för ett strikt, redaktionellt utseende. Lyxiga färgpaletter har flera kombinationer byggda kring svala metaller. I Gradiently Studio renderas en sval metallisk Mark live bakom dina ord i varje storlek, och Auto-färg väljer ljus eller mörk text för varje rad ur Markens egen palett, så att silverytor förblir läsbara utan att du kontrollerar varje format.