# Grå gradient: neutrale koder, der ikke er kedelige

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

Grå er den farve, folk vælger, når de ikke vil vælge. Med et farveskær, lys og én accent bliver den en af de mest selvsikre baggrunde, du kan bruge.

## The short version

- En grå gradient ser gennemtænkt ud, når de grå toner har et let skær, enten køligt mod blå eller varmt mod brun.
- Blander du varme og kølige grå i én gradient, ser den snavset ud, så vælg én temperatur, og hold dig til den.
- Metalliske grå opstår af et skarpt, lyst bånd mellem mørkere stop, som efterligner lys, der rammer en overflade.
- Grå gradienter får mere synlige striber end farverige, og et fint lag korn er den sædvanlige løsning.
- Én mættet accentfarve mod en grå gradient får hele designet til at se bevidst ud.

En **grå gradient** holder op med at se kedelig ud i det øjeblik, de grå toner får et skær. Helt neutrale grå, dem med lige meget rød, grøn og blå, føles flade og digitale. Skub dem en anelse køligt, mod blå, og du får tåge, skifer og stål; skub dem varmt, mod brun, og du får sten, beton og tin. Tilføj lys, der kommer et sted fra, og én accentfarve, og grå bliver rolig, moderne og stille selvsikker. Koder til hver følger her.

## Varm grå eller kølig grå: vælg én

Kølige grå føles tekniske, rene og præcise. Varme grå føles arkitektoniske, naturlige og bløde. Begge virker smukt alene. Sammen i én gradient kæmper de, og resultatet ligner en udtværing. Se på farveprøverne nedenfor parvis: den øverste række trækker mod blå, den nederste mod brun, og forskellen er lille, men tydelig, når du først har set den.

- Tåge: #f4f6f8
- Kølig dis: #aeb6be
- Skifer: #4a535d
- Storm: #22272c
- Kridt: #f3f1ee
- Beton: #b5b1ab
- Tin: #5f5b56
- Grafit: #1c1c1e

Fire kølige grå og fire varme. Grafit ligger tæt på neutral, og derfor passer den til næsten alt.

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

Tåge og skifer er det kølige par: tåge til lyse, luftige layouts og skifer til seriøse, mørke. Storm tilføjer en oplyst sky, som giver en mørk grå ægte dybde. Sten og beton er det varme par, tættere på byggematerialer, og grafit er den næsten sorte, du kan bruge i stedet for ren sort.

- Tåge: `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 sten: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Beton: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafit: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Seks grå med en temperatur. Storm og grafit bærer hvid skrift; tåge, sten og beton vil have mørk skrift.

Går du endnu mørkere, fortsætter koderne til [sort gradient](https://gradiently.design/da/guide/black-gradient) fra grafit. Til designs bygget af én nuance i mange lysheder, se [monokrom gradient](https://gradiently.design/da/guide/monochrome-gradient).

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

Metal er ikke en farve, det er en refleksion. En **sølvgradient** virker på grund af et skarpt, lyst bånd klemt inde mellem mørkere stop, sådan som lys rammer en buet overflade. Gunmetal bruger det samme trick på et mørkere niveau, og børstet stål tilføjer fine parallelle linjer. De er markante, så brug dem til et mærke, en overskriftsplade eller et enkelt panel i stedet for en hel side.

- Poleret sølv: `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%)`
- Tin: `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å. Jo smallere det lyse bånd er, desto mere skinnende ser metallet ud; spred det bredt, og det bliver satin.

Børstet stål ser bedst ud, når linjerne ligger over en blødt oplyst gradient i stedet for alene. To lag klarer det:

```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 hvide linjer for hver tredje pixel over en oplyst sølvblanding. Skift vinklen på det andet lag for at flytte, hvor lyset falder.

## Grå plus én farve

Få baggrunde fremhæver en enkelt stærk farve så godt som grå. Accenten ser klarere ud mod neutral, end den nogensinde gør mod andre farver, så lidt rækker langt: ét ord, én knap, én linje. Vælg accenten efter branche og stemning.

| Accent | Hex | Opfattes som | God til |
| --- | --- | --- | --- |
| Elektrisk blå | `#3b82f6` | Teknisk, troværdig | Software, fintech, data |
| Signalorange | `#f97316` | Industriel, energisk | Byggeri, værktøj, logistik |
| Lime | `#a3e635` | Sporty, frisk | Fitness, løb, outdoorudstyr |
| Støvet rosa | `#f2c6c2` | Blød, moderigtig | Mode, skønhed, livsstil |
| Messing | `#c9a24a` | Eksklusiv, klassisk | Arkitektur, ure, hoteller |

Brug kølige grå med blå og lime, varme grå med orange, støvet rosa og messing.

Der er hele farveskemaer bygget på den måde i [farvepaletter til tech](https://gradiently.design/da/guide/tech-color-palettes) og [neutrale farvepaletter](https://gradiently.design/da/guide/neutral-color-palettes).

## Grå, der ser bevidst ud

### Ser ufærdigt ud

- Helt neutrale grå uden skær
- Varme og kølige grå i én blanding
- Synlige striber hen over en glat flade
- Tre eller fire accentfarver
- Mellemgrå tekst på mellemgrå baggrund

### Ser bevidst ud

- Et let blåt eller brunt skær hele vejen
- Én temperatur fra start til slut
- Et fint korn over hele gradienten
- Én accent, brugt sparsomt
- Næsten hvid eller næsten sort skrift, aldrig mellemgrå

Striber fortjener deres egen advarsel. Grå har ingen nuance, der kan aflede øjet, så hvert trin i en glat gradient ses, især på store skærme og efter komprimering. Et let støjlag skjuler det; [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture) har et kodeudsnit, og [striber i gradienter](https://gradiently.design/da/guide/gradient-banding) forklarer, hvorfor det sker.

## Grå gradienter på hjemmesider og i mørk tilstand

På nettet gør grå gradienter deres bedste arbejde i det stille. En tågegradient bag en featuresektion skiller den fra en hvid side uden en hård kant. I mørk tilstand giver en grafitgradient, der lysner en smule mod toppen af et kort, dybde, hvor en flad grå ville ligne et hul. Hold forskellen mellem stoppene lille, et par procent lyshed, så gradienten læses som lys og ikke som pynt. [Design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design) dækker de bredere regler for mørke brugerflader, fra fladefarver til kontrast.

## Grå gradientbaggrunde i praksis

Arkitekter, ingeniørfirmaer og softwarevirksomheder bruger grå, fordi den lader arbejdet tale. En skifergradient med hvid skrift og én blå accent får en projektannoncering til at virke præcis; en varm stengradient med grafitskrift får et porteføljecover til at føles taktilt. [Branding til arkitektfirmaer](https://gradiently.design/da/guide/architecture-firm-branding) viser, hvor langt en afdæmpet palet kan nå.

Et bredt LinkedIn-billede med en kølig skifergrå gradientbaggrund og ordene Bygget til at holde i hvidt

Et LinkedIn-linkbillede på en skifergrå Mark. Hvid skrift på den mørke side; det oplyste område holder sig væk fra ordene.

Diskrete baggrunde er dér, hvor et designsystem betaler sig. I Gradiently har en grå Mark sit eget korn, som holder striber på afstand, og Automatisk tekstfarve vælger lys eller mørk skrift linje for linje, mens den grå tone skifter hen over billedet.

## FAQ

### Hvordan får jeg en grå gradient til at se mindre kedelig ud?

Giv de grå toner et let køligt eller varmt skær, belys gradienten fra én side, tilføj fint korn, og brug én mættet accentfarve.

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

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

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

Begge dele er korrekte. Gray er den amerikanske stavemåde og grey den britiske; de betyder præcis den samme farve, på dansk grå.

### Hvilken farve passer bedst til en grå gradient?

Én stærk accent: elektrisk blå eller lime til kølige grå, signalorange, støvet rosa eller messing til varme grå.

### Hvorfor har min grå gradient striber?

Glatte grå blandinger viser hvert farvetrin, især efter komprimering. Tilføj et let støjlag, og eksportér som PNG.