# Diskrete gradienter: stille farveskift til rene brugerflader

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

De bedste gradienter i brugerflader er dem, ingen lægger mærke til, før de er væk. Her er koder, du kan indsætte i dag, de steder hvor de gør gavn, og den ene tekniske fælde, alle falder i.

## The short version

- En diskret gradient ændrer lysheden med kun få procent eller flytter farvetonen et lille trin, så en flade ser belyst ud frem for flad.
- Diskrete gradienter fungerer bedst på sidebaggrunde, kort, herosektioner og flader i mørk tilstand, hvor de giver dybde uden at konkurrere med indholdet.
- Blanding i oklch holder en diskret gradients lyshedsskift jævnt fra den ene ende til den anden.
- Diskrete gradienter får mere banding end kraftige, fordi der er færre farvetrin mellem to tætliggende toner, og lidt støj er den sædvanlige løsning.
- På en mørk brugerflade læses en lidt lysere overkant som lys, der falder på fladen.

En **diskret gradient** bevæger sig mellem to farver, der ligger så tæt, at du mærker skiftet mere, end du ser det: hvid til en kølig råhvid, næsten sort til en lidt blødere næsten sort. Det lille skift får en flade til at se belyst ud, og derfor bruger rene brugerflader dem på sidebaggrunde, kort og paneler i mørk tilstand. Koderne nedenfor holder forskellen i lyshed på få procent; bliver den større, begynder gradienten at blive et element frem for en flade.

## Koder til lyse diskrete gradienter

Hver af disse starter tæt på hvid og driver mod en svag nuance. Vælg nuancen ud fra din brandfarve, så selv baggrunden bærer et spor af identitet. Overgange fra top til bund føles mest naturlige, fordi lyset som regel kommer oppefra.

- Papir: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Disblå: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Varm hør: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Syrendis: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Myntelavering: `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 skærm læses de som blidt belyst papir; på en telefon i dagslys næsten som hvid.

## Koder til mørke diskrete gradienter

Mørke flader har endnu mere gavn af dem, fordi helt flad sort ligner et hul i skærmen. Løft toppen en anelse, og lad bunden falde til ro. [Gradienter til mørk tilstand](https://gradiently.design/da/guide/dark-mode-gradients) dækker hele temaer; disse er byggestenene.

- Grafit: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Midnat: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Blækviolet: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Skovnat: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Glød fra toppen: `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. Glød fra toppen passer til en hero eller en modal: en svag pøl af lys oppefra.

## Hvor diskrete gradienter virker i en brugerflade

| Flade | Hvor diskret | Eksempel |
| --- | --- | --- |
| Sidebaggrund | Knap synlig over hele højden | `#ffffff` til `#f6f7f9` |
| Kort | En anelse lysere i overkanten | `#ffffff` til `#fafafa` |
| Herosektion | En svag nuance, der samler sig bag overskriften | Hjørnelys eller glød fra toppen |
| Knap | Lysere top, lidt dybere bund | `#4f46e5` til `#4338ca` |
| Panel i mørk tilstand | Toppen løftet, bunden faldet til ro | `#18181b` til `#0f0f12` |
| Sidebjælke eller footer | Et trin mørkere end siden, stadig med overgang | `#f8fafc` til `#eef2f7` |

Diskrete gradienter efter flade. Brug én retning i hele brugerfladen, så lyset ser ud til at komme fra ét sted.

Tommelfingerreglen: en diskret gradient må aldrig være det, du kigger på. Hvis en anmelder kommenterer gradienten, er den for kraftig til en baggrund. Flere afdæmpede udtryk til tryk og sociale medier såvel som skærme finder du i [minimalistiske baggrunde](https://gradiently.design/da/guide/minimalist-backgrounds).

Et opslag i portræt med en kort tekstlinje på en rolig, blidt skiftende baggrund

En rolig baggrund og én kort linje. Når farven forbliver stille, gør typografien arbejdet.

## Sådan toner du en diskret gradient med din brandfarve

En neutral grå gradient er sikker, men anonym. Når du toner den lyse eller mørke ende med et strejf af din brandfarvetone, føles hele brugerfladen beslægtet med logoet, uden at nogen kan pege på hvorfor. Tricket er at beholde farvetonen og smide næsten al mætningen væk.

1. **Tag brandets farvetone** Konvertér din primære brandfarve til oklch eller HSL, og notér kun farvetonen: omkring 265 for en violet, 160 for en grøn, 30 for en varm orange.
2. **Hold den næsten grå** Sæt chroma meget lavt, omkring 0,005 til 0,015 i oklch, eller mætning under cirka 30 % i HSL ved meget høj lyshed. Du vil have en hvisken af farve, ikke en pastel.
3. **Fastlæg to lyshedsværdier** Til lyse temaer kan du prøve 99 % og 96 %; til mørke temaer omkring 20 % og 15 %. Hold begge ender på samme farvetone, så overgangen aldrig driver mod grå eller en anden farve.
4. **Tjek den ved siden af ren hvid eller sort** Placer gradienten ved siden af en ren hvid eller sort blok. Kan du slet ikke se forskellen, så skub den nederste ende en smule; er nuancen tydelig fra den anden ende af lokalet, så sænk chroma.

Samme nuance kan derefter føres videre til kanter, skillelinjer og hover-tilstande, så gradienten er en del af et stille system frem for en enlig effekt. Knapper er det ene sted, hvor du kan tillade et lidt kraftigere skift, et par procent mørkere i bunden, fordi en antydning af volumen får dem til at se trykbare ud.

## Sådan skriver du en diskret gradient i CSS

Hexkoder virker overalt. Vil du have finere kontrol, så skriv farverne i oklch, hvor det første tal er den opfattede lyshed, så du kan fastlægge skiftet præcist: fra 99 % til 96 %, for eksempel. Blanding i oklch holder også ændringen jævn i hele længden. [CSS-gradienter i oklch](https://gradiently.design/da/guide/css-gradient-oklch) forklarer syntaksen, og [CSS linear-gradient](https://gradiently.design/da/guide/css-linear-gradient) dækker det grundlæggende.

```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 hex-reserve og derefter en oklch-version med et præcist lyshedsskift til browsere, der understøtter farveinterpolation i gradienter.

> **Fast eller rullende** `background-attachment: fixed` holder gradienten bundet til vinduet, så en lang side ikke strækker den ud til et usynligt skift. Test det på mobil, hvor nogle browsere behandler faste baggrunde anderledes.

## Hvorfor diskrete gradienter får banding, og løsningen

To tætliggende farver har meget få trin imellem sig i et 8-bit-billede. Stræk dem ud over en hero på 1920 pixels, og hvert trin bliver en synlig stribe, især på mørke gradienter og billigere skærme. Den fulde forklaring står i [banding i gradienter](https://gradiently.design/da/guide/gradient-banding).

### Viser striber

- To mørke, meget tætte farver over en hel skærm
- En gradient gemt som komprimeret JPEG
- En ren overgang uden noget, der bryder trinene op

### Forbliver glat

- Et lidt større skift eller et tredje stop
- Tegnet i CSS eller eksporteret som PNG
- Et svagt lag støj oven på gradienten

På nettet fjerner en lillebitte SVG-støjtekstur lagt over gradienten med lav opacitet de synlige trin, uden at nogen bemærker kornet; [støjtekstur i CSS](https://gradiently.design/da/guide/css-noise-texture) har koden. Til opslag på sociale medier og slides har en Gradiently Mark sit eget korn og tegnes i alle størrelser, så en stille baggrund forbliver glat, uanset om det er en story eller et banner. Når du vil have det modsatte af stille, har [livlige gradienter](https://gradiently.design/da/guide/vibrant-gradients) de mættede koder.

## FAQ

### Hvad er en diskret gradient?

En gradient mellem to meget tætte farver, som regel med kun få procents forskel i lyshed, så fladen ser blidt belyst ud frem for synligt farvet.

### Hvad er en god diskret gradient til en hvid baggrund?

Prøv `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, som driver fra hvid til en svag kølig grå.

### Hvorfor ser min diskrete gradient stribet ud?

Tætte farver har få trin imellem sig, så de får banding. Tilføj et tredje stop, gør skiftet lidt større, eller læg en svag støjtekstur ovenpå.

### Skal diskrete gradienter gå fra top til bund?

Som regel. Lys kommer typisk oppefra, så en lidt lysere top virker naturlig på både lyse og mørke flader.