Sølvgradient: metalliske koder og lyssetting

En sølvgradient ser ut som metall når den har tre ting vanlig grått mangler: et svakt kjølig skjær, stor forskjell mellom det mørkeste og lyseste fargestoppet og et smalt høylys fremfor et bredt. En pålitelig startkode er linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Nedenfor finner du seks sølvvarianter å kopiere, lysreglene bak dem og CSS til sølvtekst, knapper og børstet metall.

Koder til sølvgradienter

Slik lyssetter du en sølvgradient

Sølv viser, som annet polert metall, hovedsakelig reflektert lys. Gradienten din er en malt refleksjon, så tenk på hvor lyset kommer fra og hvor skarpt overflaten fanger det.

1. 1

   Gi gråtonene et svakt kjølig skjær

   Tilsett litt blått i hvert fargestopp, akkurat nok til at gråtonen ikke lenger ligner støv eller sement.

2. 2

   Gå mørkere enn det føles riktig

   Metall trenger en dyp skygge. Det mørkeste fargestoppet bør være mørkt metall, ikke mellomgrått.

3. 3

   Hold høylyset smalt

   Et nesten hvitt bånd som dekker en liten del av gradienten, leses som glans. Et bredt, lyst område leses som en lysegrå overflate.

4. 4

   Velg polert eller sateng

   Plasser fargestoppene tett for polert sølv med skarpe refleksjoner, og spre dem for en myk satengfinish.

Skru kontrasten helt opp med en skarp horisontlinje gjennom midten, så blir sølvet til speilkrom. Kromeffekt på tekst dekker den varianten. For et varmt metall etter samme prinsipp, se gullgradient.

Sølv sammenlignet med vanlig grått

Vil du ha en rolig, nøytral overflate fremfor metall, er oppgaven en annen: grå gradient og monokrom gradient dekker myke gråtoner til bakgrunner.

Hvilken sølvfinish du bør bruke

Hver finish sier noe litt forskjellig, så velg den ut fra oppgaven fremfor vane. En merkevare kan fint bruke to, for eksempel polert sølv til logoen og børstet sølv til felt på emballasjen, så lenge fargeskjæ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 bruker et sprang i midten, fra 48% til 52%, som ligner en horisont reflektert i en buet flate. Gradientknapper i CSS har flere knappemønstre, og gradienttekst forklarer tekstklipping og støtten i ulike nettlesere.

Å designe med sølv

Sølv virker moderne, kjølig og presist, mens gull virker varmt og tradisjonelt. Det passer til teknologilanseringer, klokker og smykker, jubileer (sølv er tradisjonelt det 25.), vinterkampanjer og alt med et futuristisk preg. Som gull ser det mest verdifullt ut i små doser på en mørk bakgrunn: et monogram, en tynn linje, én tittel.

Sølv passer også godt med isblått og dyp marineblått i en vinterpalett, og med svart og hvitt for et stramt, redaksjonelt uttrykk. Luksuriøse fargepaletter har flere kombinasjoner rundt kjølige metaller. I Studio i Gradiently gjengis en kjølig, metallisk Mark levende bak teksten din i alle størrelser. Auto-tekstfarge velger lys eller mørk tekst for hver linje fra Markens egen palett, slik at sølvflater forblir leselige uten at du må sjekke hvert format.