# Diskreta gradienter: stilla färgskiften för rena gränssnitt

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

De bästa gradienterna i gränssnitt är de som ingen lägger märke till förrän de är borta. Här är koder du kan klistra in i dag, platserna där de gör nytta och den tekniska fällan som fångar alla.

## The short version

- En diskret gradient ändrar ljusheten med bara några procent, eller flyttar nyansen ett litet steg, så att en yta ser upplyst ut i stället för platt.
- Diskreta gradienter fungerar bäst på sidbakgrunder, kort, hero-sektioner och ytor i mörkt läge, där de ger djup utan att tävla med innehållet.
- Att blanda i oklch håller en diskret gradient ljushetsförändring jämn från ena änden till den andra.
- Diskreta gradienter får mer band än kraftiga, eftersom det finns färre färgsteg mellan två nära toner, och lite brus är den vanliga lösningen.
- I ett mörkt gränssnitt läses en något ljusare överkant som ljus som faller på ytan.

En **diskret gradient** rör sig mellan två färger som ligger så nära varandra att du känner förändringen mer än ser den: vitt till ett svalt benvitt, nästan svart till ett något mjukare nästan svart. Det lilla skiftet får en yta att se upplyst ut, vilket är varför rena gränssnitt använder dem på sidbakgrunder, kort och paneler i mörkt läge. Koderna nedan håller skillnaden i ljushet till några procent. Är den större börjar gradienten bli en egenskap i stället för en yta.

## Koder för ljusa diskreta gradienter

Var och en av dessa börjar nära vitt och glider mot en svag nyans. Välj nyansen ur din varumärkesfärg så att även bakgrunden bär ett spår av identitet. Blandningar från topp till botten känns mest naturliga, eftersom ljuset oftast kommer ovanifrån.

- Papper: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Blå dimma: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Varmt linne: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Lilla dis: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Mintlasyr: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Hörnljus: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Sex ljusa diskreta gradienter. På en ljus skärm läses de som milt upplyst papper, och på en telefon i dagsljus nästan som vitt.

## Koder för mörka diskreta gradienter

Mörka ytor har ännu större nytta, eftersom rent platt svart ser ut som ett hål i skärmen. Lyft toppen en aning och låt botten sjunka. [Gradienter för mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients) täcker hela teman, och det här är byggstenarna.

- Grafit: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Midnatt: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Bläckviolett: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Skogsnatt: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Glöd uppifrån: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Sex mörka diskreta gradienter. Glöden uppifrån passar en hero eller en modal: en svag ljuspöl uppifrån.

## Var diskreta gradienter fungerar i ett gränssnitt

| Yta | Hur diskret | Exempel |
| --- | --- | --- |
| Sidbakgrund | Knappt synlig över hela höjden | `#ffffff` till `#f6f7f9` |
| Kort | En aning ljusare vid överkanten | `#ffffff` till `#fafafa` |
| Hero-sektion | En svag ton som samlas bakom rubriken | Hörnljus eller glöd uppifrån |
| Knapp | Ljusare topp, något djupare botten | `#4f46e5` till `#4338ca` |
| Panel i mörkt läge | Toppen lyft, botten sjunken | `#18181b` till `#0f0f12` |
| Sidofält eller sidfot | Ett steg mörkare än sidan, fortfarande gradient | `#f8fafc` till `#eef2f7` |

Diskreta gradienter per yta. Använd en riktning i hela gränssnittet så att ljuset verkar komma från ett ställe.

Tumregeln: en diskret gradient ska aldrig vara det du tittar på. Om en granskare kommenterar gradienten är den för stark för en bakgrund. För fler återhållsamma looker i tryck och sociala medier såväl som på skärmar, se [minimalistiska bakgrunder](https://gradiently.design/sv/guide/minimalist-backgrounds).

Ett stående inlägg med en kort rad typ på en lugn, mjukt skiftande bakgrund

En lugn bakgrund och en kort rad. När färgen håller sig stilla gör typen jobbet.

## Så tonar du en diskret gradient med din varumärkesfärg

En neutral grå gradient är säker men anonym. Att tona den ljusare eller mörkare änden med ett spår av din varumärkesnyans får hela gränssnittet att kännas släkt med logotypen utan att någon kan peka på varför. Knepet är att behålla nyansen och slänga nästan all mättnad.

1. **Ta varumärkesnyansen** Konvertera din huvudsakliga varumärkesfärg till oklch eller HSL och notera bara dess nyans: cirka 265 för en violett, 160 för en grön, 30 för en varm orange.
2. **Håll den nästan grå** Sätt kromat mycket lågt, cirka 0,005 till 0,015 i oklch, eller mättnad under cirka 30 % i HSL vid mycket hög ljushet. Du vill ha en viskning av färg, inte en pastell.
3. **Sätt två ljushetsvärden** För ljusa teman, prova 99 % och 96 %, för mörka teman cirka 20 % och 15 %. Håll båda ändar på samma nyans så att blandningen aldrig driver mot grått eller en andra färg.
4. **Kontrollera den bredvid rent vitt eller svart** Placera gradienten bredvid ett enkelt vitt eller svart block. Om du inte ser någon skillnad alls, putta den nedre änden. Är nyansen tydlig från andra sidan rummet, sänk kromat.

Samma nyans kan sedan föras vidare till ramar, avdelare och hovertillstånd, så att gradienten är en del av ett stilla system i stället för en ensam effekt. Knappar är det enda stället där du kan tillåta ett något starkare skifte, några procent mörkare nedtill, eftersom en antydan till volym hjälper dem att se tryckbara ut.

## Skriva en diskret gradient i CSS

Hexkoder fungerar överallt. För finare kontroll, skriv färgerna i oklch, där första talet är upplevd ljushet, så att du kan sätta skiftet exakt: från 99 % till 96 %, till exempel. Att blanda i oklch håller också förändringen jämn längs hela längden. [CSS-gradient i oklch](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar syntaxen, och [CSS linjär gradient](https://gradiently.design/sv/guide/css-linear-gradient) täcker grunderna.

```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 hexreserv, sedan en oklch-version med ett exakt ljushetsskifte för webbläsare som stöder färginterpolation i gradienter.

> **Fast eller rullande** `background-attachment: fixed` håller gradienten knuten till fönstret, så att en lång sida inte sträcker ut den till ett osynligt skifte. Testa på mobil, där vissa webbläsare behandlar fasta bakgrunder annorlunda.

## Varför diskreta gradienter får band, och lösningen

Två nära färger har mycket få steg emellan i en 8-bitarsbild. Sträck ut dem över en hero på 1920 pixlar och varje steg blir en synlig rand, särskilt på mörka gradienter och billigare skärmar. Hela förklaringen finns i [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding).

### Visar band

- Två mörka, mycket nära färger över en hel skärm
- En gradient sparad som komprimerad JPEG
- En ren blandning utan något som bryter stegen

### Förblir len

- Ett något större skifte, eller ett tredje stopp
- Renderad i CSS, eller exporterad som PNG
- Ett svagt brusskikt över gradienten

På webben tar en liten SVG-brustextur lagd över gradienten med låg opacitet bort synliga steg utan att någon märker kornet, och [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) har koden. För inlägg och bilder i sociala medier bär en Gradiently-Mark sitt eget korn och renderas i varje storlek, så att en stilla bakgrund förblir len oavsett om den är en story eller en banner. När du vill ha raka motsatsen till stilla har [livfulla gradienter](https://gradiently.design/sv/guide/vibrant-gradients) de mättade koderna.

## FAQ

### Vad är en diskret gradient?

En gradient mellan två mycket nära färger, vanligen med bara några procents skillnad i ljushet, så att ytan ser milt upplyst ut i stället för synligt färgad.

### Vilken är en bra diskret gradient för en vit bakgrund?

Prova `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, som glider från vitt till ett svagt svalt grått.

### Varför ser min diskreta gradient randig ut?

Nära färger har få steg emellan, så de får band. Lägg till ett tredje stopp, vidga skiftet något eller lägg en svag brustextur ovanpå.

### Ska diskreta gradienter gå från topp till botten?

Oftast. Ljuset kommer ofta ovanifrån, så en något ljusare topp läses som naturlig på både ljusa och mörka ytor.