# Hvit gradient: diskrete lyskoder til rene design

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

En hvit gradient er den roligste gradienten som finnes, og den mange designere bommer litt på. Disse kodene viser hvor mye endring som er nok, hvilke toner du bør bruke, og hvordan du lager en ren overgang til hvitt.

## The short version

- En hvit gradient blander rent hvitt med en brukket hvittone som bare er noen få prosent mørkere, med en varm, kjølig eller perlemorsaktig tone.
- Brutte hvittoner med et svakt varmt skjær føles som papir; de med et svakt blått skjær føles som porselen eller snø.
- En hvit gradient trenger nok spenn til å overleve lyse mobilskjermer, der svært små forskjeller forsvinner.
- For å la innhold gli over i en hvit bakgrunn i CSS bruker du en gradient fra `rgb(255 255 255 / 0)` til `#ffffff`.
- Hvite gradienter er gode produktbakgrunner fordi en myk lysavtagning oppfattes som et belyst studio fremfor et flatt, frilagt bilde.

En **hvit gradient** går fra rent hvitt til brukket hvitt som bare er litt mørkere, vanligvis med en mild varm, kjølig eller perlemorsaktig tone. Endringen er liten med vilje: den skal føles som lys som faller over en overflate, ikke som farge. Det gjør hvite gradienter ideelle til rene nettsteder, produktbilder, invitasjoner og minimalistiske sosiale innlegg. Nedenfor ser du hvor sterk den bør være, en palett med brutte hvittoner, koder du kan kopiere og riktig måte å lage en overgang til hvitt i CSS på.

## Hvor mye endring en hvit gradient trenger

For lite, og ingen ser den, særlig på en mobil med full lysstyrke. For mye, og hvitt blir grått og skittent. Tabellen gir tre styrker, målt etter hvor langt sluttfargen ligger under rent hvitt. De fleste design trenger den midterste.

| Styrke | Fra | Til | Bruk til |
| --- | --- | --- | --- |
| Et hvisk | `#ffffff` | `#f8f8f8` | Store nettseksjoner, lang lesing |
| Myk | `#ffffff` | `#efefef` | Kort, sosiale innlegg, invitasjoner |
| Synlig | `#ffffff` | `#e2e2e2` | Produktbakgrunner, studiobakgrunner |

Nøytrale verdier for tydelighet. I praksis gir du sluttfargen en svak varm eller kjølig tone, som i kodene nedenfor.

## Brutte hvittoner å bygge med

Helt nøytrale gråtoner i enden av en hvit gradient virker litt livløse. Et hint av farge gjør forskjellen: varme brutte hvittoner oppfattes som papir, lin og elfenben; kjølige som porselen, frost og snø. Velg tonen som passer resten av paletten, og hold den konsekvent gjennom et sett design.

- Rent hvitt: #ffffff
- Elfenben: #fffdf8
- Papir: #f6f4f0
- Lin: #f1ece3
- Porselen: #f1f4f7
- Frost: #eaf2f8
- Perlemorslilla: #f3eef8
- Perlemorsmint: #eef6f6

Brutte hvittoner. På en hvit side ser de nesten like ut; ved siden av hverandre er de varme og kjølige familiene tydelig ulike.

## Koder for hvit gradient

Alle disse begynner i eller nær rent hvitt. Papir og elfenben er varme og redaksjonelle. Porselen og frost er kjølige og tekniske. Morgenlys legger til et mykt skjær fra ett hjørne, og perlemor blander flere nesten usynlige toner til et fint fargespill som aldri blir en regnbue.

- Papir: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Elfenben: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porselen: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Frost: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Morgenlys: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Perlemor: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Seks hvite gradienter. På en lys skjerm oppfattes de som overflater fremfor farger, og det er nettopp poenget.

Hvis du ønsker litt mer farge med samme luftige følelse, er [pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients) neste steg. Se kodene for [grå gradient](https://gradiently.design/nb/guide/grey-gradient) for den andre enden av den nøytrale skalaen.

## En hvit gradient bak produkter

Fotografer lyssetter en hvit bakgrunn slik at lyset avtar mykt mot kantene, og skiller dermed objektet fra bakgrunnen uten en skyggelinje. En radial hvit gradient gjør det samme på skjerm. Den er særlig nyttig når du frilegger et produkt fra fotoet: flatt hvitt bak ser pålimt ut, mens en myk overgang virker som et studio.

Studiobakgrunn: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Lysest like over sentrum, der produktet står, og lys grå i hjørnene. Bruk den i 2048×2048 til produktbilder på Shopify.

[Bakgrunner til produktbilder](https://gradiently.design/nb/guide/product-photo-backgrounds) dekker skygger, fargede bakgrunner og når hvitt er feil valg.

## Lag en overgang til hvitt med en CSS-gradient

Den vanligste hvite gradienten på nett er ingen bakgrunn: den er en overgang som myker opp slutten av en avkortet artikkel, bunnen av en rulleliste eller kanten av et foto. Skriv den gjennomsiktige enden som hvitt med null opasitet. Moderne nettlesere blander `transparent` riktig, men `rgb(255 255 255 / 0)` sier nøyaktig hva du mener og unngår det gråaktige båndet noen eldre motorer tegnet.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

En overgang som ender i heldekkende hvitt like før nederste kant, slik at siste tekstlinje forsvinner rent. La sluttfargen matche sidebakgrunnen.

Hvis sidebakgrunnen er brukket hvitt fremfor rent hvitt, lar du overgangen ende i den fargen i stedet, ellers ender den i en synlig lysere stripe. [Gjennomsiktige CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-transparent) går grundigere gjennom overganger og overlegg.

## Rent hvitt uten et utvasket preg

### Utvasket

- Ender i en nøytral mellomgrå tone
- Så små endringer at de forsvinner på mobilen
- Lysegrå skrift på en gradient i brukket hvitt
- Varme og kjølige hvittoner blandet sammen
- Overgang til hvitt på en kremfarget side

### Rent

- Ender i svakt tonet brukket hvitt
- En myk, men synlig endring, sjekket på mobil
- Nesten svart eller dyp marineblå skrift
- Én tonefamilie gjennomgående
- Overgang til sidens nøyaktige bakgrunnsfarge

Hvite gradienter får også bånd, men mindre enn mørke; hvis du ser trinn på en stor skjerm, løser svært fint korn det, som forklart i [bånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Hvite gradienter i minimalistiske design

Minimalistiske design står og faller på typografien, og hvitt gir den ingen steder å gjemme seg. Bruk en sterk, nesten svart blekkfarge, rikelig med luft og én detalj i farge. En hvit gradient gir akkurat nok dybde til at siden virker belyst og ferdig. [Minimalistiske bakgrunner](https://gradiently.design/nb/guide/minimalist-backgrounds) har flere ideer i samme ånd, og [hero-bakgrunner til nettsteder](https://gradiently.design/nb/guide/website-hero-background) viser hvordan en gradient i porselen eller morgenlys kan bære en hel landingsside.

En stående bryllupsinvitasjon med myk elfenbenshvit bakgrunn og ordene Du er invitert i mørk skrift

En invitasjon på 5×7 tommer på en myk elfenbensfarget Mark. Mørkt blekk, romslige marger og ingenting annet.

I Gradiently fungerer lyse Marks på samme måte som kraftige: Marken holder et rolig område bak ordene, og Auto-tekstfarge velger en mørk skriftfarge fra Markens egen palett, slik at en delikat hvittone aldri ender med grå tekst som forsvinner.

## FAQ

### Hva er en god kode for en hvit gradient?

Prøv `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)` for et mykt papiruttrykk. Avslutt på #e6ebf0 i stedet for et kjølig porselensuttrykk.

### Hvordan lager jeg en gradient fra hvitt til gjennomsiktig i CSS?

Bruk `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Endre sluttfargen til sidebakgrunnen hvis den ikke er rent hvit.

### Hvorfor er den hvite gradienten min usynlig?

Sluttfargen ligger for nær hvitt. Gjør den mørkere til rundt #efefef, med en svak varm eller kjølig tone, og sjekk den på en mobil med full lysstyrke.

### Hvilken tekstfarge fungerer på en hvit gradient?

Nesten svart, koksgrått eller dyp marineblå. Unngå lysegrå skrift, som forsvinner i den mørkere enden av gradienten.