# Monokroma gradienter: en kulör, många toner

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

En färg som bara rör sig i ljushet: den tystaste gradienten som finns, och den som visar varje brist. Här är koder som fungerar, CSS som håller kulören ärlig och lösningen på bandning.

## The short version

- En monokrom gradient blandar en enda kulör från mörk till ljus, eller går från svart till vitt genom gråtoner.
- En monokrom gradient är en enda gradient, medan ett monokromatiskt färgschema är en hel palett byggd av en kulör.
- Att definiera stoppen i oklch med fast kulör hindrar en enfärgad gradient från att driva mot grått eller en annan kulör.
- Mörka monokroma gradienter bandar mest, eftersom en 8-bitarsskärm har mycket få skilda steg mellan nästan svarta toner.
- Ett lätt kornlager över en monokrom gradient döljer bandning och får den att se ut som en yta.

En **monokrom gradient** blandar en kulör genom sina egna nyanser, från djup till ljus, utan att ta in en andra färg. Svart till vitt genom grått är den renaste versionen; en marinblå som stiger mot blekblått, eller en aubergine som lyfter mot lila, är också monokroma gradienter. De ser lugna och dyra ut eftersom inget konkurrerar, och av samma skäl visar de varje brist: bandning, grumliga mittpunkter och en kulör som glider halvvägs. Koderna och CSS:en nedan undviker alla tre.

Kol till silver: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

En svartvit gradient med stoppen hopträngda mot den mörka änden, så att det mesta av bilden förblir mörkt och ljuset kommer sent.

## Monokrom gradient eller monokromatiskt färgschema

De två begreppen hänger ihop och blandas ofta ihop. Ett [monokromatiskt färgschema](https://gradiently.design/sv/guide/monochromatic-color-scheme) är en palett: flera nyanser, toner och skuggor av en kulör som används genom hela en design. En monokrom gradient är en enda gradient inom den idén. Du kan använda en monokrom gradient i en design vars palett inte alls är monokromatisk, som en djupblå bakgrund under orange text.

| Aspekt | Monokrom gradient | Monokromatiskt schema |
| --- | --- | --- |
| Vad det är | En sammanhängande gradient | En uppsättning separata färger |
| Var det finns | En bakgrund, en form, en knapp | Ett helt varumärke eller en layout |
| Antal kulörer | En | En |
| Typisk användning | Hero-bakgrunder, kort, affischer | Gränssnitt, illustration, identitet |

Samma princip, olika skala. Gradienten är en yta; schemat är ett system.

## Koder för monokroma gradienter att kopiera

Var och en av dessa behåller en enda kulör och ändrar bara ljusheten och lite av mättnaden. Mörkare stopp är något mer mättade än ljusare, vilket är hur verklig färg beter sig i skugga och därför ser de naturliga ut.

- Svart till vitt: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Grafitspotlight: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Marin till himmel: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Tall till mint: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Oxblod till rosa: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Aubergine till lila: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Umbra till honung: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Papper till sten: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Åtta enfärgade gradienter. Var och en stannar i sin egen kulör från ände till ände.

För den mörka änden av den här familjen för sig, se [svarta gradienter](https://gradiently.design/sv/guide/black-gradient) och [grå gradienter](https://gradiently.design/sv/guide/grey-gradient). För hur stegen förhåller sig till varandra är [nyanser, toner och skuggor](https://gradiently.design/sv/guide/tints-tones-shades) bakgrundsläsningen.

## Så gör du en monokrom gradient i CSS

Det enklaste sättet att hålla en kulör är att skriva stoppen i oklch och bara ändra det första talet, ljusheten. Kulörvinkeln förblir fast, så färgen kan inte vandra, och oklch fördelar ljusheten jämnt, så gradienten stiger i jämn takt. [OKLCH förklarat](https://gradiently.design/sv/guide/oklch-explained) går igenom formatet.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Ändra kulörtalet (264) för att flytta hela gradienten till en annan färg. Kromat sjunker i den ljusa änden, som det gör i verkligt ljus.

1. **Välj kulören** Välj en färg och ta reda på dess kulörvinkel. Ett blått ligger runt 260, ett grönt runt 145, ett rött runt 25.
2. **Sätt det mörkaste och ljusaste stoppet** Håll den mörka änden över rent svart och den ljusa änden under rent vitt om du inte vill ha en hård kant. Ljushet från 0,15 till 0,9 är ett bekvämt spann.
3. **Placera mittstoppet med avsikt** Flytta det mot den ände du vill ska dominera. Ett mittstopp vid 30 procent ger en mestadels ljus bild; vid 70 procent, mestadels mörk. [Färgstopp i gradienter](https://gradiently.design/sv/guide/gradient-stops) visar mer.
4. **Lägg till korn** Ett svagt brusskikt över gradienten döljer bandning och ger en materialkänsla.

## Därför bandar mörka monokroma gradienter

De flesta skärmar visar 256 nivåer per kanal. En gradient från svart `#000000` till mörkgrått `#282828` har bara 40 skilda steg att arbeta med. Sträck den över en hero på 1920 pixlars bredd och varje steg blir en rand på 48 pixlar, som ögat lätt urskiljer i mörkret. Flerfärgade gradienter döljer detta eftersom kanalerna ändras vid olika tillfällen; en monokrom gradient ändrar alla tre tillsammans, så banden hamnar på rad.

### Bandar

- Nästan svart till mörkgrått över en hel skärm
- Kraftig JPEG-komprimering vid export
- Perfekt ren digital yta
- Lång gradient med låg kontrast och få stopp

### Jämn

- Ett bredare ljushetsspann, eller ett kortare avstånd
- PNG, eller en inställning för hög kvalitet
- Ett lätt kornlager ovanpå
- Ett radiellt ljus som ändras snabbare nära mitten

[Bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding) och [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) går in på lösningen i detalj, med kod för ett SVG-brusskikt.

## Där monokroma gradienter fungerar

Eftersom de bär en färg låter monokroma gradienter text och fotografi leda. De passar lyxiga produktlanseringar, arkitektbyråer, musiksläpp och varje varumärke vars identitet är en enda färg. Sätt orden i den ljusaste eller mörkaste änden av samma kulör, eller i vitt eller svart, så läses designen som ett enda självsäkert beslut.

Behöver du en accent, hämta den utanför kulören och använd den en gång: ett enda orange datum på en marinblå gradient, eller ett rött pris på grafit. Gradienten förblir monokrom, och accenten får all uppmärksamhet eftersom inget annat konkurrerar om den.

Ett kvadratiskt albumomslag i djupa svarta och koltoner med ett enda ord i blek text

Ett kvadratiskt släppomslag på 1080×1080, nästan helt skugga, med ljuset stigande vid ena kanten.

En bred webbplats-hero för en arkitektbyrå på en mörk enfärgad gradient

En webbplats-hero på 1920×1080: samma tysta enfärgade angreppssätt över en mycket bredare bild.

En monokrom bakgrund i Gradiently kan också röra sig: en Mark renderar sitt ljus live, så en enfärgad gradient kan driva långsamt bakom orden, och med Pro exporteras den som en sömlös loop i varje storlek du designar.

## FAQ

### Vad är en monokrom gradient?

En gradient som blandar en enda kulör genom sina egna nyanser, från mörk till ljus, eller går från svart till vitt genom gråtoner.

### Är en monokrom gradient samma sak som ett monokromatiskt färgschema?

Nej. Ett monokromatiskt schema är en palett av en kulör som används genom en design; en monokrom gradient är en sammanhängande gradient av en enda kulör.

### Hur gör jag en enfärgad gradient i CSS?

Skriv stoppen i oklch och ändra bara ljusheten, till exempel från `oklch(0.18 0.08 264)` till `oklch(0.86 0.06 264)`. Kulören förblir fast, så färgen kan inte driva.

### Varför har min svarta gradient ränder?

Mörka toner har mycket få skilda steg på en 8-bitarsskärm, så gradienten visar band. Lägg till ett lätt kornlager, bredda ljushetsspannet eller exportera som PNG.

### Vilken kod har en svartvit gradient?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` är den enkla versionen. För ett rikare utseende, tryck ihop stoppen mot den mörka änden och sluta före rent vitt.