# Silvergradient: metalliska koder och hur du ljussätter dem

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

Skillnaden mellan silver och vanligt grått är ljuset. Här är sex silvergradienter att kopiera, de fyra reglerna som får dem att läsas som metall och CSS för text, knappar och borstade ytor.

## The short version

- En silvergradient läses som metall snarare än grått när den kombinerar en svag sval ton, ett brett omfång från mörkt till ljust och en smal, ljus högdager.
- Polerat silver har hårda övergångar och stark kontrast, satinsilver har mjuka övergångar och borstat silver lägger till fina parallella linjer.
- Rent neutrala gråtoner tenderar att se platta och dammiga ut, så de mest övertygande silvertonerna lutar mycket svagt åt blått eller, för platina och tenn, mycket svagt åt varmt.
- Långa, subtila gråa gradienter är särskilt benägna att få ränder, vilket ett fint kornlager döljer.
- Silvergradienter fungerar bäst på text, ramar, knappar och små former, satta mot en mörk botten.

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

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

Sex silvertoner: fyra för text, ramar och former, en borstad yta och en bakgrund. Var och en har ett mörkt stopp och en nästan vit högdager.

- Skuggstål: #4b525c
- Kanonmetall: #5f6670
- Silver: #a7afb9
- Ljust silver: #c9cfd6
- Högdager: #f7f9fb

Silverfärgkoderna bakom Polerat silver. Alla lutar svagt åt blått, vilket är varför de läses som metall snarare än betong.

## 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. **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. **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. **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. **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](https://gradiently.design/sv/guide/chrome-effect) går igenom den versionen. För en varm metall med samma logik, se [guldgradient](https://gradiently.design/sv/guide/gold-gradient-design).

## Silver eller vanligt grått

### Läses som grått

- Helt neutrala gråtoner
- Två stopp, ljusgrått till mellangrått
- Bara jämna, milda övergångar
- Ett brett blekt område utan tydlig högdager
- Stora platta silverytor på en vit sida

### Läses som silver

- Gråtoner med en svag sval eller varm ton
- Fem eller sex stopp, kanonmetall till nästan vitt
- En skarpare reflektion någonstans
- En smal, ljus högdager vid sidan om mitten
- Silverdetaljer på en mörk botten

Om du egentligen vill ha en lugn neutral yta snarare än metall är det ett annat jobb: [grå gradient](https://gradiently.design/sv/guide/grey-gradient) och [monokrom gradient](https://gradiently.design/sv/guide/monochrome-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.

| Yta | Hur den ser ut | Använd den till |
| --- | --- | --- |
| Polerad | Skarpa reflektioner, stark kontrast, en ljus smal högdager | Loggor, rubriktext, prisgrafik |
| Satin | Mjuka övergångar, mild glans, liten kontrast | Stora ytor, förpackningar, stilla bakgrunder |
| Borstad | Fina parallella linjer under en mjuk glans | Paneler, produktsidor, tekniska varumärken |
| Platina | Sval, ljus, nästan vit högdager | Premiumnivåer, jubileer, smycken |
| Tenn | Mörkare, varmare, mjukare | Tradition, hantverk, herrmode |

Fem silverytor och var var och en hör hemma. Alla bygger på samma ljusregler; bara kontrast, ton och stoppavstånd ändras.

## Silvertext och knappar 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);
}
```

Rubriktext i silver, en pillerknapp med delad reflektion och en panel i borstad metall. Knappens mörka text håller etiketten läsbar.

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](https://gradiently.design/sv/guide/css-gradient-button) har fler knappmönster, och [gradienttext](https://gradiently.design/sv/guide/css-gradient-text) förklarar textbeskärning och dess stöd i olika webbläsare.

> **Gråtoner får lätt ränder** Långa, subtila grå gradienter är där ränder syns mest, särskilt när en plattform komprimerar din bild. Lägg till ett fint kornlager och exportera PNG i full storlek. [Ränder i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar varför.

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

En stående inbjudan till ett silverbröllop med svalt metalliskt ljus och orden Tjugofem år

En jubileumsinbjudan där sval, metallisk belysning bär temat och orden förblir lugna.

Ett stående produktinlägg som tillkännager en stålklocka på en mörk sval bakgrund

Ett produktinlägg för en klocka: en mörk, sval yta med silver som ljus, inte som platt fyllning.

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

## FAQ

### Vilken är en bra kod för silvergradient?

Prova `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Den går från kanonmetall via ljust silver till en nästan vit högdager och tillbaka.

### Vilka hexkoder ger metalliskt silver?

En kombination som #4b525c, #5f6670, #a7afb9, #c9cfd6 och #f7f9fb. Var och en lutar mycket svagt åt blått, vilket hindrar den från att se ut som vanligt grått.

### Hur gör jag en borstad metalleffekt i CSS?

Använd en repeterande linjär gradient med små stopp en eller två pixlar från varandra i närliggande gråtoner, som `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Varför ser min silvergradient grå ut?

Den saknar troligen kontrast och en högdager. Lägg till ett mörkare kanonmetallstopp, ett smalt nästan vitt band och en svag sval ton i varje stopp.

### Vad skiljer silver- och platinagradienter?

I design är platina oftast ett något svalare, ljusare silver med en vitare högdager, medan tenn är ett mörkare, varmare silvergrått.

### Vilken bakgrundsfärg får silver att se bäst ut?

Mörka bottnar som svart, kol, djup marin eller midnattsblått. Silver på vitt eller blekgrått tappar sin högdager och tenderar att se platt och urblekt ut.