# Grå gradient: neutrala koder som inte är tråkiga

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

Grått är färgen folk väljer när de inte vill välja. Med en nyans, ljus och en enda accent blir det en av de tryggaste bakgrunderna du kan använda.

## The short version

- En grå gradient ser genomtänkt ut när gråtonerna har en svag nyans, antingen kall mot blått eller varm mot brunt.
- Att blanda varma och kalla gråtoner i en gradient får den att se smutsig ut, så välj en temperatur och håll fast vid den.
- Metalliska gråtoner kommer från ett skarpt, ljust band mellan mörkare stopp, vilket efterliknar ljus som fångas av en yta.
- Grå gradienter får tydligare färgband än färgstarka, och ett fint kornlager är den vanliga lösningen.
- En mättad accentfärg mot en grå gradient får hela designen att se avsiktlig ut.

En **grå gradient** slutar vara tråkig i samma ögonblick som gråtonerna får en nyans. Rent neutrala gråtoner, de med lika delar rött, grönt och blått, känns platta och digitala. Putta dem lite åt det kalla, mot blått, och du får dimma, skiffer och stål. Putta dem åt det varma, mot brunt, och du får sten, betong och tenn. Lägg till ljus som kommer från någonstans och en accentfärg, så blir grått lugnt, modernt och stilla självsäkert. Koder för varje följer.

## Varmgrått eller kallgrått: välj ett

Kalla gråtoner känns tekniska, rena och exakta. Varma gråtoner känns arkitektoniska, naturliga och mjuka. Båda fungerar vackert var för sig. Tillsammans i en gradient bråkar de, och resultatet ser ut som en smutsfläck. Titta på färgproven nedan i par: den översta raden lutar åt blått, den nedersta åt brunt, och skillnaden är liten men uppenbar när du väl sett den.

- Dimma: #f4f6f8
- Kall dis: #aeb6be
- Skiffer: #4a535d
- Storm: #22272c
- Krita: #f3f1ee
- Betong: #b5b1ab
- Tenn: #5f5b56
- Grafit: #1c1c1e

Fyra kalla gråtoner och fyra varma. Grafit ligger nära neutralt, vilket är varför den passar ihop med nästan allt.

## Koder för kalla och varma grå gradienter

Dimma och skiffer är det kalla paret: dimma för ljusa, luftiga layouter och skiffer för allvarliga mörka. Storm lägger till ett upplyst moln, vilket ger en mörkgrå verkligt djup. Sten och betong är det varma paret, närmare byggmaterial, och grafit är det nästan svarta du kan använda i stället för rent svart.

- Dimma: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Skiffer: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Storm: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Varm sten: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Betong: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafit: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Sex gråtoner med en temperatur. Storm och grafit bär vit text. Dimma, sten och betong vill ha mörk text.

Om du går ännu mörkare tar koderna för [svart gradient](https://gradiently.design/sv/guide/black-gradient) vid där grafit slutar. För designer byggda av en nyans i många ljushetsnivåer, se [monokrom gradient](https://gradiently.design/sv/guide/monochrome-gradient).

## Silver, stål och andra metalliska grå gradienter

Metall är ingen färg, det är en reflektion. En **silvergradient** fungerar på grund av ett skarpt, ljust band som är inklämt mellan mörkare stopp, så som ljus fångas av en böjd yta. Gunmetal använder samma trick på en mörkare nivå, och borstat stål lägger till fina parallella linjer. De är kraftfulla, så använd dem till en bricka, en rubrikplatta eller en enda panel snarare än en hel sida.

- Polerat silver: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Gunmetal: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Tenn: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Linjer av borstat stål: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metalliska gråtoner. Ju smalare det ljusa bandet är, desto blankare ser metallen ut. Sprid ut det brett så blir den sidenmatt.

Borstat stål ser bäst ut när linjerna ligger över en mjuk upplyst gradient i stället för för sig. Två lager räcker:

```css
.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}
```

Fina vita linjer var tredje pixel över en upplyst silverblandning. Ändra vinkeln på det andra lagret för att flytta var ljuset faller.

## Grått plus en färg

Få bakgrunder framhäver en enda stark färg så väl som grått. Accenten ser ljusare ut mot neutralt än den någonsin gör mot andra färger, så lite räcker långt: ett ord, en knapp, en rad. Välj accenten efter bransch och stämning.

| Accent | Hex | Läses som | Bra för |
| --- | --- | --- | --- |
| Elektrisk blå | `#3b82f6` | Tekniskt, pålitligt | Programvara, fintech, data |
| Signalorange | `#f97316` | Industriellt, energiskt | Bygg, verktyg, logistik |
| Lime | `#a3e635` | Sportigt, friskt | Fitness, löpning, friluftsutrustning |
| Blekrosa | `#f2c6c2` | Mjukt, modernt | Mode, skönhet, livsstil |
| Mässing | `#c9a24a` | Premium, klassiskt | Arkitektur, klockor, hotell |

Använd kalla gråtoner med blått och lime, varma gråtoner med orange, blekrosa och mässing.

Det finns kompletta scheman byggda så i [tekniska färgpaletter](https://gradiently.design/sv/guide/tech-color-palettes) och [neutrala färgpaletter](https://gradiently.design/sv/guide/neutral-color-palettes).

## Grått som ser avsiktligt ut

### Ser ofärdigt ut

- Rent neutrala gråtoner utan nyans
- Varma och kalla gråtoner i en blandning
- Synliga band över en len yta
- Tre eller fyra accentfärger
- Mellangrå text på mellangrå bakgrund

### Ser avsiktligt ut

- En svag blå eller brun nyans genomgående
- En temperatur från start till slut
- Ett fint korn över hela gradienten
- En accent, sparsamt använd
- Nästan vit eller nästan svart text, aldrig mellangrå

Färgband förtjänar en egen varning. Gråtoner har ingen nyans som distraherar ögat, så varje steg i en len gradient syns, särskilt på stora skärmar och efter komprimering. Ett lätt brusskikt döljer det. [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) har ett kodexempel, och [färgband i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar varför det uppstår.

## Grå gradienter på webbplatser och i mörkt läge

På webben gör grå gradienter sitt bästa arbete i det tysta. En dimgradient bakom ett funktionsavsnitt skiljer det från en vit sida utan en hård kant. I mörkt läge ger en grafitgradient som ljusnar lite mot toppen av ett kort det djup, där ett platt grått skulle se ut som ett hål. Håll skillnaden mellan stoppen liten, några procent ljushet, så att gradienten läses som ljus snarare än dekoration. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) går igenom de bredare reglerna för mörka gränssnitt, från ytfärger till kontrast.

## Grå gradientbakgrunder i praktiken

Arkitekter, ingenjörsfirmor och programvaruföretag använder grått eftersom det låter arbetet tala. En skiffergradient med vit text och en blå accent får ett projektmeddelande att se exakt ut. En varm stengradient med grafittext får ett portföljomslag att kännas taktilt. [Varumärkesbyggande för arkitektbyråer](https://gradiently.design/sv/guide/architecture-firm-branding) visar hur långt en återhållsam palett kan nå.

En bred LinkedIn-bild med kall skiffergrå gradientbakgrund och orden Byggt för att hålla i vitt

En LinkedIn-länkbild på en skiffer-Mark. Vit text på den mörkare sidan. Det upplysta området håller sig fritt från orden.

Subtila bakgrunder är där ett designsystem lönar sig. I Gradiently bär en grå Mark sitt eget korn, vilket håller färgband borta, och Auto-bläck väljer ljus eller mörk text rad för rad när gråtonen skiftar över bilden.

## FAQ

### Hur får jag en grå gradient att se mindre tråkig ut?

Ge gråtonerna en svagt kall eller varm nyans, ljussätt gradienten från ena sidan, lägg på fint korn och använd en mättad accentfärg.

### Vilken CSS gäller för en silvergradient?

Använd ett ljust band mellan mörkare stopp, till exempel `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Heter det grey gradient eller gray gradient?

Båda är rätt. Gray är den amerikanska stavningen och grey den brittiska. De betyder exakt samma färg.

### Vilken färg passar bäst till en grå gradient?

En stark accent: elektrisk blå eller lime till kalla gråtoner, signalorange, blekrosa eller mässing till varma gråtoner.

### Varför har min grå gradient ränder?

Len grå blandning visar varje färgsteg, särskilt efter komprimering. Lägg på ett lätt brusskikt och exportera som PNG.