# Grå gradient: nøytrale koder som ikke er kjedelige

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

Grått er fargen folk velger når de ikke vil velge. Med en undertone, lys og én aksent blir det en av de mest sikre bakgrunnene du kan bruke.

## The short version

- En grå gradient virker gjennomtenkt når gråtonene har en svak undertone, enten kjølig mot blått eller varm mot brunt.
- Å blande varme og kjølige gråtoner i én gradient får den til å se skitten ut. Velg derfor én temperatur og hold deg til den.
- Metalliske gråtoner skapes med et skarpt, lyst bånd mellom mørkere stopp som etterligner lys på en overflate.
- Grå gradienter får tydeligere synlige bånd enn fargerike gradienter, og et lag med fine korn er den vanlige løsningen.
- Én mettet aksentfarge mot en grå gradient får hele designet til å virke bevisst.

En **grå gradient** slutter å være kjedelig så snart gråtonene får en undertone. Rene, nøytrale gråtoner med like mye rødt, grønt og blått virker flate og digitale. Skyv dem svakt mot kjølig blått, og du får tåke, skifer og stål. Skyv dem mot varmt brunt, og du får stein, betong og tinn. Legg til lys som kommer fra et bestemt sted og én aksentfarge, så blir grått rolig, moderne og stillferdig sikkert. Koder til hvert uttrykk følger under.

## Varmgrått eller kaldgrått: velg én

Kjølige gråtoner virker tekniske, rene og presise. Varme gråtoner virker arkitektoniske, naturlige og myke. Begge fungerer vakkert alene. Sammen i én gradient kjemper de, og resultatet ligner en flekk. Se på fargeprøvene under i par. Øverste rad heller mot blått, nederste mot brunt. Forskjellen er liten, men tydelig når du først har sett den.

- Tåke: #f4f6f8
- Kjølig dis: #aeb6be
- Skifer: #4a535d
- Storm: #22272c
- Kritt: #f3f1ee
- Betong: #b5b1ab
- Tinn: #5f5b56
- Grafitt: #1c1c1e

Fire kjølige gråtoner og fire varme. Grafitt ligger nær nøytralt og passer derfor sammen med nesten alt.

## Koder til kjølige og varme grå gradienter

Tåke og skifer er det kjølige paret: tåke til lyse, luftige layouter og skifer til seriøse, mørke. Storm legger til en belyst sky som gir mørkegrått ekte dybde. Stein og betong er det varme paret, nærmere byggematerialer. Grafitt er nesten svart og kan brukes i stedet for rent svart.

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

Seks gråtoner med temperatur. Storm og grafitt bærer hvit tekst. Tåke, stein og betong trenger mørk tekst.

Vil du gå enda mørkere, fortsetter kodene i [svart gradient](https://gradiently.design/nb/guide/black-gradient) fra grafitt. For design bygget av én fargetone i mange lyshetsnivåer, se [monokrom gradient](https://gradiently.design/nb/guide/monochrome-gradient).

## Sølv, stål og andre metalliske grå gradienter

Metall er ikke en farge, men en refleksjon. En **sølvgradient** fungerer takket være et skarpt, lyst bånd klemt mellom mørkere stopp, slik lys treffer en krum overflate. Våpenmetall bruker samme grep på et mørkere nivå, mens børstet stål legger til fine, parallelle linjer. Disse er kraftige, så bruk dem til et merke, en overskriftsplate eller ett panel fremfor en hel side.

- Polert sølv: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Våpenmetall: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Tinn: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Linjer i børstet stål: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metalliske gråtoner. Jo smalere det lyse båndet er, desto blankere virker metallet. Et bredt bånd gir satengpreg.

Børstet stål ser best ut når linjene ligger over en mykt belyst gradient fremfor alene. To lag gjør jobben:

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

Fine hvite linjer hver tredje piksel over en belyst sølvovergang. Endre vinkelen på det andre laget for å flytte lyset.

## Grått pluss én farge

Få bakgrunner fremhever én sterk farge like godt som grått. Aksenten virker klarere mot en nøytral flate enn mot andre farger, så litt rekker langt: ett ord, én knapp eller én linje. Velg aksenten etter bransje og stemning.

| Aksent | Heks | Oppfattes som | Passer til |
| --- | --- | --- | --- |
| Elektrisk blå | `#3b82f6` | Teknisk, pålitelig | Programvare, finansteknologi, data |
| Signaloransje | `#f97316` | Industrielt, energisk | Bygg, verktøy, logistikk |
| Lime | `#a3e635` | Sportslig, friskt | Trening, løping, friluftsutstyr |
| Blekrosa | `#f2c6c2` | Mykt, moteriktig | Mote, skjønnhet, livsstil |
| Messing | `#c9a24a` | Påkostet, klassisk | Arkitektur, klokker, hoteller |

Bruk kjølige gråtoner med blått og lime, varme gråtoner med oransje, blekrosa og messing.

Hele fargeoppsett bygget slik finnes i [teknologipaletter](https://gradiently.design/nb/guide/tech-color-palettes) og [nøytrale fargepaletter](https://gradiently.design/nb/guide/neutral-color-palettes).

## Grått som virker bevisst

### Ser uferdig ut

- Rene, nøytrale gråtoner uten undertone
- Varme og kjølige gråtoner i samme overgang
- Synlige bånd over en glatt flate
- Tre eller fire aksentfarger
- Mellomgrå tekst på mellomgrå bakgrunn

### Ser gjennomtenkt ut

- En svak blå eller brun undertone gjennom hele flaten
- Én temperatur fra start til slutt
- Fine korn over hele gradienten
- Én aksent brukt sparsomt
- Nesten hvit eller nesten svart tekst, aldri mellomgrå

Synlige bånd fortjener en egen advarsel. Grått har ingen fargetone som avleder øyet, så hvert trinn i en glatt gradient vises, særlig på store skjermer og etter komprimering. Et svakt støylag skjuler det. [Støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) har en kodebit, og [bånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer årsaken.

## Grå gradienter på nettsteder og i mørkt tema

På nett gjør grå gradienter sin beste jobb i det stille. En tåkegradient bak en funksjonsseksjon skiller den fra en hvit side uten en hard kant. I mørkt tema gir en grafittgradient som lysner svakt mot toppen av et kort, dybde der flatt grått ville lignet et hull. Hold forskjellen mellom stoppene liten, noen få prosent lyshet, slik at gradienten virker som lys fremfor pynt. [Design i mørkt tema](https://gradiently.design/nb/guide/dark-mode-design) dekker reglene for mørke grensesnitt, fra flatefarger til kontrast.

## Grå gradientbakgrunner i praksis

Arkitekter, ingeniørfirmaer og programvareselskaper bruker grått fordi det lar arbeidet tale. En skifergradient med hvit tekst og én blå aksent gir en presis prosjektkunngjøring. En varm steingradient med grafittfarget tekst gjør en porteføljeforside taktil. [Merkevarebygging for arkitektfirmaer](https://gradiently.design/nb/guide/architecture-firm-branding) viser hvor langt en behersket palett kan nå.

Et bredt LinkedIn-bilde med kjølig skifergrå gradientbakgrunn og teksten Bygget for å vare i hvitt

Et LinkedIn-lenkebilde på en skifergrå Mark. Hvit tekst på den mørke siden, mens det lyse området holder seg unna ordene.

Diskrete bakgrunner er der et designsystem lønner seg. I Gradiently har en grå Mark egne korn som holder synlige bånd unna. Auto-tekstfarge velger lys eller mørk tekst linje for linje mens gråtonen endres over flaten.

## FAQ

### Hvordan gjør jeg en grå gradient mindre kjedelig?

Gi gråtonene en svak kjølig eller varm undertone, belys gradienten fra én side, legg til fine korn og bruk én mettet aksentfarge.

### Hva er CSS-koden til en sølvgradient?

Bruk et lyst bånd mellom mørkere stopp, for eksempel `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Heter det grey gradient eller gray gradient på engelsk?

Begge er riktige. Gray er amerikansk stavemåte og grey britisk. De betyr nøyaktig samme farge.

### Hvilken farge passer best til en grå gradient?

Én sterk aksent: elektrisk blått eller lime til kjølige gråtoner, signaloransje, blekrosa eller messing til varme.

### Hvorfor har den grå gradienten min striper?

Glatte grå overganger viser hvert fargetrinn, særlig etter komprimering. Legg til et svakt støylag og eksporter som PNG.