# Sølvgradient: metalliske koder og lyssetting

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

Forskjellen mellom sølv og vanlig grått er lyset. Her er seks sølvgradienter du kan kopiere, fire regler som får dem til å ligne metall, og CSS til tekst, knapper og børstede flater.

## The short version

- En sølvgradient ligner metall fremfor grått når den kombinerer et svakt kjølig skjær, et stort spenn fra mørkt til lyst og et smalt høylys.
- Polert sølv har skarpe overganger og sterk kontrast, satengsølv har myke overganger, og børstet sølv tilfører fine, parallelle linjer.
- Helt nøytrale gråtoner virker ofte flate og støvete, så overbevisende sølvtoner heller som regel svakt mot blått, eller svakt mot varme toner for platina og tinn.
- Lange, subtile grå gradienter får særlig lett synlige fargebånd, som et fint kornlag skjuler.
- Sølvgradienter fungerer best på tekst, rammer, knapper og små former mot en mørk bakgrunn.

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

- Polert sølv: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Satengsølv: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Børstet sølv: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Kjølig platina: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Varmt tinn: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Sølvlys på svart: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Seks sølvvarianter: fire til tekst, rammer og former, én børstet flate og én bakgrunn. Alle har et mørkt fargestopp og et nesten hvitt høylys.

- Skyggestål: #4b525c
- Mørkt metall: #5f6670
- Sølv: #a7afb9
- Lyst sølv: #c9cfd6
- Høylys: #f7f9fb

Sølvfargekodene bak Polert sølv. Alle heller svakt mot blått, og derfor ligner de metall fremfor betong.

## 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. **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. **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. **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. **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](https://gradiently.design/nb/guide/chrome-effect) dekker den varianten. For et varmt metall etter samme prinsipp, se [gullgradient](https://gradiently.design/nb/guide/gold-gradient-design).

## Sølv sammenlignet med vanlig grått

### Leses som grått

- Helt nøytrale gråtoner
- To fargestopp, lysegrått til mellomgrått
- Bare jevne, forsiktige overganger
- Et bredt, lyst område uten tydelig høylys
- Store, flate sølvområder på en hvit side

### Leses som sølv

- Gråtoner med et svakt kjølig eller varmt skjær
- Fem eller seks fargestopp, mørkt metall til nesten hvitt
- Én skarpere refleksjon et sted
- Et smalt høylys utenfor midten
- Sølvdetaljer på mørk bakgrunn

Vil du ha en rolig, nøytral overflate fremfor metall, er oppgaven en annen: [grå gradient](https://gradiently.design/nb/guide/grey-gradient) og [monokrom gradient](https://gradiently.design/nb/guide/monochrome-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.

| Finish | Slik ser den ut | Bruk den til |
| --- | --- | --- |
| Polert | Skarpe refleksjoner, sterk kontrast, et smalt høylys | Logoer, overskrifter, prisgrafikk |
| Sateng | Myke overganger, svak glans, liten kontrast | Store flater, emballasje, rolige bakgrunner |
| Børstet | Fine, parallelle linjer under en myk glans | Paneler, produktsider, tekniske merkevarer |
| Platina | Kjølig, lyst, nesten hvitt høylys | Premium-nivåer, jubileer, smykker |
| Tinn | Mørkere, varmere, mykere | Tradisjon, håndverk, herreklær |

Fem sølvfinisher og hvor de passer. Alle bygger på samme lysregler. Bare kontrast, fargeskjær og avstanden mellom fargestoppene endres.

## Sølvtekst og knapper i CSS

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

Overskrift i sølv, en avrundet knapp med delt refleksjon og et panel i børstet metall. Mørk tekst holder knappens etikett leselig.

Knappen bruker et sprang i midten, fra 48% til 52%, som ligner en horisont reflektert i en buet flate. [Gradientknapper i CSS](https://gradiently.design/nb/guide/css-gradient-button) har flere knappemønstre, og [gradienttekst](https://gradiently.design/nb/guide/css-gradient-text) forklarer tekstklipping og støtten i ulike nettlesere.

> **Gråtoner får lett fargebånd** Lange, subtile grå gradienter viser fargebånd tydeligst, særlig etter at en plattform har komprimert bildet. Legg til et fint kornlag og eksporter PNG i full størrelse. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer hvorfor.

## Å 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.

En stående invitasjon til sølvjubileum med kjølig metallisk lys og teksten Tjuefem år

En jubileumsinvitasjon der kjølig, metallisk lys bærer temaet og teksten holder seg rolig.

Et stående produktinnlegg som lanserer en stålklokke på mørk, kjølig bakgrunn

Et produktinnlegg for en klokke: en mørk, kjølig overflate med sølv som lys, fremfor en flat grå fyllfarge.

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](https://gradiently.design/nb/guide/luxury-color-palettes) 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.

## FAQ

### Hva er en god kode til en sølvgradient?

Prøv `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Den går fra mørkt metall gjennom lyst sølv til et nesten hvitt høylys og tilbake.

### Hvilke heksadesimale koder gir metallisk sølv?

En kombinasjon som #4b525c, #5f6670, #a7afb9, #c9cfd6 og #f7f9fb. Alle heller svakt mot blått, så de ikke ligner vanlig grått.

### Hvordan lager jeg en børstet metalleffekt i CSS?

Bruk en gjentatt lineær gradient med små fargestopp én eller to piksler fra hverandre i nærliggende gråtoner, som `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Hvorfor ser sølvgradienten min grå ut?

Den mangler sannsynligvis kontrast og et høylys. Legg til et mørkere metallfarget stopp, et smalt, nesten hvitt bånd og et svakt kjølig skjær i hvert fargestopp.

### Hva er forskjellen på sølv- og platinagradienter?

I design er platina vanligvis et litt kjøligere, lysere sølv med et hvitere høylys, mens tinn er en mørkere, varmere sølvgrå tone.

### Hvilken bakgrunnsfarge får sølv til å se best ut?

Mørke bakgrunner som svart, kullgrått, dyp marineblått eller midnattsblått. Sølv på hvitt eller lysegrått mister høylyset og virker ofte flatt og utvasket.