# Diskrete gradienter: rolige fargeskift i rene grensesnitt

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

De beste grensesnittgradientene merkes først når de er borte. Her er koder du kan bruke i dag, stedene der de er nyttige og den tekniske fellen som rammer alle.

## The short version

- En diskret gradient endrer lyshet med noen få prosent eller fargetone et lite trinn, så flaten virker belyst fremfor flat.
- Diskrete gradienter fungerer best på sidebakgrunner, kort, hero-seksjoner og mørke flater, der de gir dybde uten å konkurrere med innholdet.
- Blanding i oklch holder lyshetsendringen jevn fra den ene enden til den andre.
- Diskrete gradienter får mer synlige bånd enn kraftige fordi det er færre fargetrinn mellom nærliggende toner. Litt støy er den vanlige løsningen.
- I et mørkt grensesnitt virker en litt lysere toppkant som lys på flaten.

En **diskret gradient** går mellom to så nærliggende farger at du føler endringen mer enn du ser den: hvitt til kjølig brukket hvitt, nesten svart til litt mykere nesten svart. Dette lille skiftet får flaten til å virke belyst. Derfor brukes de i rene grensesnitt på sidebakgrunner, kort og mørke paneler. Kodene under holder lyshetsforskjellen til noen få prosent. Mer enn det gjør gradienten til et blikkfang fremfor en overflate.

## Koder til lyse, diskrete gradienter

Alle begynner nær hvitt og går mot en svak fargetone. Hent tonen fra merkevarefargen så også bakgrunnen har et spor av identitet. Overganger ovenfra og ned virker mest naturlige, siden lys vanligvis kommer ovenfra.

- Papir: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Disblå: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Varm lin: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Syrindis: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Mintlavering: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Hjørnelys: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Seks lyse, diskrete gradienter. På en lys skjerm ligner de mykt belyst papir, og på telefon i dagslys nesten hvitt.

## Koder til mørke, diskrete gradienter

Mørke flater har enda større nytte, fordi rent, flatt svart ligner et hull i skjermen. Lysne toppen litt og la bunnen falle til ro. [Gradienter i mørkt tema](https://gradiently.design/nb/guide/dark-mode-gradients) dekker hele temaer. Dette er byggeklossene.

- Grafitt: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Midnatt: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Blekkfiolett: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Skogsnatt: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Toppglød: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Seks mørke, diskrete gradienter. Toppglød passer en hero eller dialog: et svakt lysfelt ovenfra.

## Der diskrete gradienter fungerer i grensesnitt

| Flate | Hvor diskret | Eksempel |
| --- | --- | --- |
| Sidebakgrunn | Knapt synlig gjennom hele høyden | `#ffffff` til `#f6f7f9` |
| Kort | Litt lysere langs toppen | `#ffffff` til `#fafafa` |
| Hero-seksjon | En svak fargetone bak overskriften | Hjørnelys eller toppglød |
| Knapp | Lysere topp, litt dypere bunn | `#4f46e5` til `#4338ca` |
| Panel i mørkt tema | Lysnet topp, rolig bunn | `#18181b` til `#0f0f12` |
| Sidefelt eller bunntekst | Ett trinn mørkere enn siden, fortsatt gradert | `#f8fafc` til `#eef2f7` |

Diskrete gradienter etter flate. Bruk én retning i hele grensesnittet, så lyset virker å komme fra ett sted.

Tommelfingerregelen: en diskret gradient skal aldri være det du ser på. Kommenterer en vurderer gradienten, er den for sterk som bakgrunn. For beherskede uttrykk på trykk, sosiale medier og skjerm, se [minimalistiske bakgrunner](https://gradiently.design/nb/guide/minimalist-backgrounds).

Et stående innlegg med en kort tekstlinje på en rolig bakgrunn med myk fargeendring

En rolig bakgrunn og én kort linje. Når fargen er stille, gjør typografien jobben.

## Gi en diskret gradient merkevarens fargetone

En nøytral grå gradient er trygg, men anonym. Et hint av merkevarens tone i den lyse eller mørke enden knytter hele grensesnittet til logoen uten at noen kan peke på hvorfor. Grepet er å beholde fargetonen og fjerne nesten all metning.

1. **Hent merkevarens fargetone** Konverter hovedfargen til oklch eller HSL og noter bare fargetonen: rundt 265 til fiolett, 160 til grønt eller 30 til varm oransje.
2. **Hold den nesten grå** Sett kroma svært lavt, rundt 0,005 til 0,015 i oklch, eller metning under omtrent 30% i HSL med svært høy lyshet. Du vil ha et hvisk av farge, ikke pastell.
3. **Velg to lyshetsverdier** Til lyse temaer, prøv 99% og 96%. Til mørke, rundt 20% og 15%. Hold begge ender på samme fargetone, så overgangen ikke driver mot grått eller en annen farge.
4. **Sjekk ved siden av rent hvitt eller svart** Legg gradienten ved en hvit eller svart flate. Ser du ingen forskjell, juster nedre ende litt. Er tonen tydelig fra andre siden av rommet, senk kroma.

Samme tone kan føres videre til kanter, skillelinjer og svevetilstander. Da er gradienten del av et rolig system fremfor en enkeltstående effekt. Knapper er stedet du kan tillate litt sterkere skift, noen prosent mørkere nederst, fordi et hint av volum gjør dem lettere å oppfatte som trykkbare.

## Skriv en diskret gradient i CSS

Hekskoder fungerer overalt. For finere kontroll kan du skrive fargene i oklch, der første tall er opplevd lyshet. Da setter du skiftet nøyaktig, for eksempel fra 99% til 96%. Blanding i oklch holder også endringen jevn gjennom hele lengden. [CSS-gradient i oklch](https://gradiently.design/nb/guide/css-gradient-oklch) forklarer syntaksen, og [lineær CSS-gradient](https://gradiently.design/nb/guide/css-linear-gradient) dekker grunnlaget.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

En heksreserve, så en oklch-versjon med nøyaktig lyshetsskift for nettlesere som støtter fargeinterpolasjon i gradienter.

> **Fast eller rullende** `background-attachment: fixed` knytter gradienten til vinduet, så en lang side ikke strekker den til et usynlig skift. Test på mobil, der noen nettlesere behandler faste bakgrunner annerledes.

## Derfor får diskrete gradienter bånd, og løsningen

To nærliggende farger har svært få trinn mellom seg i et 8-bitsbilde. Strekk dem over en hero på 1920 piksler, så blir hvert trinn en synlig stripe, særlig i mørke gradienter og på rimeligere skjermer. Hele forklaringen finnes i [bånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

### Viser bånd

- To mørke, svært nære farger over hele skjermen
- En gradient lagret som komprimert JPEG
- En ren overgang uten noe som bryter opp trinnene

### Holder seg jevn

- Litt større skift eller et tredje stopp
- Gjengitt i CSS eller eksportert som PNG
- Et svakt støylag over gradienten

På nett fjerner en liten SVG-støytekstur over gradienten med lav ugjennomsiktighet synlige trinn uten at kornene merkes. [Støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) har koden. Til sosiale innlegg og lysbilder har en Mark fra Gradiently egne korn og gjengis i alle størrelser, så en rolig bakgrunn holder seg jevn som story og banner. Når du vil ha det motsatte av ro, har [sterke gradienter](https://gradiently.design/nb/guide/vibrant-gradients) de mettede kodene.

## FAQ

### Hva er en diskret gradient?

En gradient mellom to svært nærliggende farger, vanligvis med noen få prosent lyshetsforskjell, så flaten virker mykt belyst fremfor tydelig farget.

### Hva er en god diskret gradient til hvit bakgrunn?

Prøv `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, som går fra hvitt til svak kjølig grå.

### Hvorfor blir min diskrete gradient stripete?

Nære farger har få trinn mellom seg, som gir bånd. Legg til et tredje stopp, øk skiftet litt eller legg en svak støytekstur oppå.

### Bør diskrete gradienter gå ovenfra og ned?

Vanligvis. Lys kommer gjerne ovenfra, så en litt lysere topp virker naturlig på både lyse og mørke flater.