# Gradientbakgrunn til PC og mobil: koder og hvordan du lager en

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

En gradient er det ideelle bakgrunnsbildet: ingen detaljer som slåss med ikonene, ingenting å gå lei av, og farge som endrer følelsen av en hel skjerm. Slik lager du et som holder seg jevnt i full størrelse.

## The short version

- Et bakgrunnsbilde med gradient er en jevn fargeovergang brukt som bakgrunn på PC eller mobil, valgt fordi den holder seg rolig bak ikoner, widgeter og vinduer.
- Lag bakgrunnsbilder til PC i skjermens nøyaktige oppløsning og i dens egen form, som regel 16:9, og bakgrunnsbilder til mobil høye, med ekstra høyde utover 9:16.
- Store, jevne gradienter er der banding vises mest, så legg til fint korn og eksporter som PNG i stedet for en komprimert JPEG.
- Plasser den lyseste eller travleste delen av gradienten unna der ikoner, klokken og widgeter ligger.
- Å blande farger i OKLCH holder regnbuegradienter og komplementære gradienter livlige i stedet for at de blir grå på midten.

Et **bakgrunnsbilde med gradient** er en jevn fargeovergang brukt som bakgrunn på en PC eller mobil. Det fungerer fordi det ikke har detaljer som konkurrerer med ikoner, widgeter og vinduer, og det endrer hele stemningen på en skjerm med farge alene. Slik lager du et godt: velg en familie på tre til fem farger, bland dem mykt med lyset der du vil at øyet skal hvile, eksporter i skjermens nøyaktige størrelse og form, og legg til fint korn så overgangen holder seg jevn i stedet for å vise striper.

Nedenfor finner du ferdige gradienter du kan kopiere, metoden for å lage dine egne, og hvordan du tilpasser hver til en skjerm. Flere fargekombinasjoner finner du i [fargekombinasjoner for gradienter](https://gradiently.design/nb/guide/gradient-color-combinations).

## Ideer til gradientbakgrunner med koder

Hver av disse er én enkelt CSS-gradient, så du kan forhåndsvise den i en nettleser, tilpasse fargene og eksportere den i en hvilken som helst størrelse. De er løst gruppert fra lyst til mørkt.

- Korallblomst: `linear-gradient(135deg, #ff9a8b 0%, #ff6a88 45%, #ff99ac 100%)`
- Morgenhimmel: `linear-gradient(160deg, #a1c4fd 0%, #c2e9fb 100%)`
- Sukkertøydis: `linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)`
- Aprikossol: `linear-gradient(120deg, #f6d365 0%, #fda085 100%)`
- Pastellspekter: `linear-gradient(120deg, #ffb3b3 0%, #ffe0a3 25%, #b8f2e6 50%, #b9c6ff 75%, #e3b8ff 100%)`
- Prismevirvel: `conic-gradient(from 210deg at 70% 30%, #ff7eb3, #ffb86b, #fff27a, #7affc4, #6bc7ff, #b58cff, #ff7eb3)`
- Dyp lagune: `linear-gradient(160deg, #134e5e 0%, #2f8f83 50%, #71b280 100%)`
- Fiolett natt: `radial-gradient(ellipse at 30% 20%, #5b3cc4 0%, #2a1b6b 45%, #0e0a24 100%)`
- Glødende skumring: `radial-gradient(ellipse at 70% 80%, #ff6a3d 0%, #8a1f5c 45%, #1a0b24 100%)`
- Midnattsstål: `linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%)`

Ti gradientbakgrunner fra lyst til mørkt. De to spektergradientene holder fargene på lignende lyshet, så de leses som ett mykt lys og ikke som striper.

## Slik lager du et bakgrunnsbilde med gradient

1. **Finn størrelsen på skjermen din** Sjekk oppløsningen i skjerminnstillingene, og skjermstørrelsen i spesifikasjonene til telefonen. Design i nøyaktig den størrelsen, eller større i samme form.
2. **Velg en fargefamilie** Tre til fem farger med et tydelig slektskap: nabofargetoner for ro, et varmt og et kjølig par for energi. [Analoge farger](https://gradiently.design/nb/guide/analogous-colors) er den enkleste veien.
3. **Plasser lyset** Bestem hvor det lyseste området skal være. På en PC, unna ikonene; på en mobil, som regel bak klokken eller nederst på midten.
4. **Bland jevnt** Spre stoppene, og bland i OKLCH hvis fargene ligger langt fra hverandre på sirkelen, så midten ikke blir grå.
5. **Legg til korn** Et fint støylag med lav styrke. Det skjuler banding og får fargen til å føles rikere.
6. **Eksporter som PNG** Tapsfri eksport holder overgangen jevn. En hardt komprimert JPEG er den vanligste årsaken til striper.

Vil du bygge et i nettleseren, setter du en gradient på en fullskjermside og blander den i OKLCH. Moderne nettlesere støtter [fargeinterpolering i gradienter](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), som holder livlige farger livlige gjennom midten av overgangen.

```html
<!doctype html>
<html>
<head>
<style>
  html, body { margin: 0; height: 100%; }
  body {
    background:
      radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
      linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
  }
</style>
</head>
<body></body>
</html>
```

En forhåndsvisning av en gradient i fullskjerm blandet i OKLCH, med en myk radial glød lagt oppå. Åpne den i en nettleser, juster tallene, og gjenskap eller ta bilde av den i skjermens størrelse.

## Former for bakgrunnsbilder til PC og mobil

Et bakgrunnsbilde ser best ut når det er laget for skjermens form, ikke beskåret fra en annen. De fleste PC-skjermer er 16:9 eller nær det; bærbare er ofte litt høyere, rundt 16:10. Telefoner er mye høyere enn 16:9: mange ligger rundt 9:19,5. Design hver form for seg, og la lyset falle på riktig sted i hver.

- PC 16:9: 1920 × 1080
- Bærbar 16:10: 1600 × 1000
- Høy telefon, omtrent 9:19,5: 900 × 1950

De tre formene du bør planlegge for. De nøyaktige pikslene varierer fra modell til modell, så sjekk din før du eksporterer.

Med to eller flere skjermer kan du enten sette ett bilde per skjerm eller lage ett bredt bilde i den samlede bredden til begge. Det andre alternativet lar én gradient flyte over hele pulten, men skjøten mellom skjermene skjærer gjennom den, så hold lyset unna den kanten.

Telefoner gir to komplikasjoner: klokken og widgetene på låseskjermen ligger over den øverste tredjedelen, og noen telefoner flytter bakgrunnsbildet litt når du vipper dem, noe som beskjærer kantene. [Størrelse på bakgrunnsbilde til mobil](https://gradiently.design/nb/guide/phone-wallpaper-size) går gjennom begge deler i detalj.

## Hold gradientbakgrunner jevne

Bakgrunnsbilder vises stort, ofte på lyse skjermer av høy kvalitet, og det gjør dem til den hardeste testen av en gradient. De to problemene du kommer til å se, er banding, der en jevn overgang brytes opp i synlige trinn, og grumsete midter, der to sterke farger møtes i grått.

### Gir striper og grums

- Nære, mørke farger over et stort område
- Kraftig JPEG-komprimering
- Komplementærfarger blandet i sRGB
- En helt glatt overgang uten støy

### Holder det jevnt

- Nok fargespenn gjennom overgangen
- PNG eller eksport i høy kvalitet
- Blanding i OKLCH, eller en farge på midtpunktet
- Fint korn over hele bildet

De dypere forklaringene står i [banding i gradienter](https://gradiently.design/nb/guide/gradient-banding) og [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients). For bakgrunnsbilder er korn den enkleste løsningen: det bryter opp trinnene så øyet ser én sammenhengende overgang, og det får flat digital farge til å føles som film.

## Mørke eller lyse gradientbakgrunner

Mørke bakgrunnsbilder er mer behagelige for øynene om kvelden og får fargerike ikoner til å skille seg ut; de får også lettere banding, så kornet betyr mer. Lyse bakgrunnsbilder føles luftige, men kan gjøre hvit tekst på widgeter vanskelig å lese. Hvis telefonen din bytter mellom lyst og mørkt utseende, kan du vurdere et par: de samme fargetonene, én versjon løftet og én gjort dypere.

En Mark vist for seg selv: en levende gradient med farge, materiale, lys og korn som kan tegnes i enhver skjermstørrelse.

I Gradiently kan du designe med hvilken som helst Mark i egendefinerte størrelser opptil 8000 piksler på den lengste siden, så ett uttrykk kan bli bakgrunnsbilde til PC, bærbar og mobil. Marks eksporteres også som loopvideoer på 5 til 30 sekunder hvis du vil ha en [levende bakgrunn](https://gradiently.design/nb/guide/live-wallpaper).

## FAQ

### Hvilken størrelse bør et bakgrunnsbilde med gradient ha?

Skjermens nøyaktige oppløsning, eller større i samme form. PC-skjermer er som regel 16:9 eller 16:10; telefoner er høyere, ofte rundt 9:19,5, så sjekk modellen din.

### Hvorfor har gradientbakgrunnen min striper?

Det er banding: skjermen viser en jevn overgang i synlige trinn. Eksporter som PNG, unngå kraftig komprimering, og legg til fint korn for å skjule det.

### Hvordan lager jeg et bakgrunnsbilde med regnbuegradient som ikke ser billig ut?

Bruk en del av spekteret i stedet for hele, hold fargene på lignende lyshet, og bland i OKLCH så fargene holder seg livlige mellom stoppene.

### Er mørke bakgrunnsbilder bedre for en telefon?

De er lettere å se på i svakt lys og får ikonene til å skille seg ut. På telefoner med OLED-skjerm kan mørke bakgrunnsbilder også bruke litt mindre strøm, men velg det du liker å se på.