Sølvgradient: metalliske koder, og hvordan du lyssætter dem

En sølvgradient ligner metal, når den har tre ting, almindelig grå mangler: et svagt køligt skær, et stort spring mellem det mørkeste og det lyseste stop og et højlys, der er smalt frem for udbredt. En pålidelig startkode er linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Nedenfor er seks sølvtoner til kopiering, lysreglerne bag dem og CSS til sølvtekst, knapper og børstet metal.

Koder til sølvgradienter

Sådan lyssætter du en sølvgradient

Sølv viser, som alt poleret metal, mest reflekteret lys. Din gradient er en malet refleks, så tænk over, hvor lyset kommer fra, og hvor skarpt fladen fanger det.

1. 1

   Giv de grå et svagt køligt skær

   Tilføj en anelse blå til hvert stop, lige nok til at det grå ikke længere ligner støv eller cement.

2. 2

   Gå mørkere, end det føles rigtigt

   Metal kræver en dyb skygge. Dit mørkeste stop skal være en gunmetal, ikke en mellemgrå.

3. 3

   Hold højlyset smalt

   Et næsten hvidt bånd over en lille del af gradienten opfattes som glans. Et bredt lyst område opfattes som en bleg grå flade.

4. 4

   Vælg poleret eller satin

   Saml stoppene tæt for poleret sølv med skarpe reflekser; spred dem ud for en blød satinfinish.

Skru kontrasten helt op med en hård horisontlinje gennem midten, så bliver sølv til spejlblank krom; kromeffekt på tekst dækker den udgave. For et varmt metal efter samme logik, se guldgradient.

Sølv og almindelig grå

Vil du faktisk have en rolig, neutral flade frem for metal, er det en anden opgave: grå gradient og monokrom gradient dækker bløde, tonale grå til baggrunde.

Hvilken sølvfinish skal du bruge

Hver finish siger noget lidt forskelligt, så vælg den efter opgaven frem for af vane. Et brand kan sagtens bruge to, for eksempel poleret sølv til et logo og børstet sølv til emballagepaneler, så længe skæret er det samme.

Sølvtekst og knapper 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 bruger et trin på midten, fra 48 % til 52 %, som opfattes som en horisont spejlet i en buet flade. Gradientknapper i CSS har flere knapmønstre, og gradienttekst forklarer tekstbeskæring og understøttelsen på tværs af browsere.

Design med sølv

Sølv virker moderne, køligt og præcist, hvor guld virker varmt og traditionelt. Det passer til teknologilanceringer, ure og smykker, jubilæer (sølv er det traditionelle 25-års), vinterkampagner og alt med et futuristisk præg. Ligesom guld ser det mest værdifuldt ud i små doser på en mørk bund: et monogram, en tynd streg, en enkelt titel.

Sølv passer også godt til isblå og dyb marineblå i en vinterpalet og til sort og hvid i et stramt, redaktionelt udtryk. Luksuriøse farvepaletter har flere kombinationer bygget op om kølige metaller. I Studio i Gradiently tegnes en kølig, metallisk Mark live bag dine ord i alle størrelser, og Automatisk farve vælger lys eller mørk skrift til hver linje ud fra din Marks egen palet, så sølvflader forbliver læsbare, uden at du skal tjekke hvert format.