# Hvid gradient: subtile lyse koder til rene design

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

En hvid gradient er den stilleste gradient, der findes, og den, de fleste designere gør en smule forkert. Disse koder viser, hvor meget forandring der er nok, hvilke toner du skal bruge, og hvordan du toner rent ud til hvid.

## The short version

- En hvid gradient blander helt hvid med en råhvid, der kun er få procent mørkere, med et varmt, køligt eller perlemorsagtigt skær.
- Råhvide med et let varmt skær føles som papir; dem med et let blåt skær føles som porcelæn eller sne.
- En hvid gradient skal have nok spænd til at overleve lyse telefonskærme, hvor meget små forskelle forsvinder.
- For at tone indhold ud i en hvid baggrund i CSS bruger du en gradient fra `rgb(255 255 255 / 0)` til `#ffffff`.
- Hvide gradienter er fremragende produktbaggrunde, fordi et blødt fald læses som et oplyst studie frem for en flad fritlægning.

En **hvid gradient** går fra helt hvid til en råhvid, der kun er lidt mørkere, som regel med et blidt varmt, køligt eller perlemorsagtigt skær. Forandringen er lille med vilje: den skal føles som lys, der falder hen over en overflade, ikke som farve. Det gør hvide gradienter ideelle til rene websites, produktbilleder, invitationer og minimalistiske opslag. Nedenfor finder du, hvor kraftig en skal være, en palet af råhvide, koder til at kopiere og den rigtige måde at tone ud til hvid i CSS.

## Hvor meget forandring en hvid gradient har brug for

For lidt, og ingen ser den, især på en telefon med fuld lysstyrke. For meget, og den hvide bliver grå og trist. Tabellen giver tre styrker, målt efter hvor langt slutfarven ligger under helt hvid. De fleste design har brug for den midterste.

| Styrke | Fra | Til | Brug til |
| --- | --- | --- | --- |
| Hvisken | `#ffffff` | `#f8f8f8` | Store sektioner på nettet, lang læsning |
| Blød | `#ffffff` | `#efefef` | Kort, opslag på sociale medier, invitationer |
| Synlig | `#ffffff` | `#e2e2e2` | Produktbaggrunde, studiebaggrunde |

Neutrale værdier for klarhedens skyld. I praksis toner du slutfarven let varm eller kølig, som i koderne nedenfor.

## Råhvide farver at bygge ud fra

Helt neutrale grå i slutningen af en hvid gradient ser lidt livløse ud. Et strejf af tone gør forskellen: varme råhvide læses som papir, hør og elfenben; kølige læses som porcelæn, frost og sne. Vælg den tone, der passer til resten af din palet, og hold den ensartet på tværs af en række design.

- Helt hvid: #ffffff
- Elfenben: #fffdf8
- Papir: #f6f4f0
- Hør: #f1ece3
- Porcelæn: #f1f4f7
- Frost: #eaf2f8
- Perlemor syren: #f3eef8
- Perlemor mint: #eef6f6

Råhvide. På en hvid side ser de næsten ens ud; side om side er de varme og kølige familier tydeligt forskellige.

## Koder til hvide gradienter

Hver af disse starter ved eller tæt på helt hvid. Papir og elfenben er varme og redaktionelle. Porcelæn og frost er kølige og tekniske. Morgenlys tilføjer en blød glød fra ét hjørne, og perlemor blander flere knap synlige toner til et sart skær, der aldrig bliver til en regnbue.

- Papir: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Elfenben: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcelæn: `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 hvide gradienter. På en lys skærm læses de som overflader frem for farver, og det er netop pointen.

Vil du have lidt mere farve og samme luftige fornemmelse, er [pastelgradienter](https://gradiently.design/da/guide/pastel-gradients) næste trin op. Den modsatte ende af den neutrale skala finder du i koderne til [grå gradienter](https://gradiently.design/da/guide/grey-gradient).

## En hvid gradient bag produkter

Fotografer belyser en hvid baggrund, så den falder blødt af mod kanterne, hvilket adskiller genstanden fra baggrunden uden en skyggelinje. En radial hvid gradient gør det samme på skærmen. Den er især nyttig, når du fritlægger et produkt fra dets foto: en flad hvid bag det ser påklistret ud, mens et blødt fald ligner et studie.

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

Lysest lige over midten, hvor produktet står, og falder til en lys grå i hjørnerne. Brug den i 2048×2048 til produktbilleder på Shopify.

[Baggrunde til produktfotos](https://gradiently.design/da/guide/product-photo-backgrounds) dækker skygger, farvede baggrunde, og hvornår hvid er det forkerte valg.

## Udtoning til hvid med en CSS-gradient

Den mest almindelige hvide gradient på nettet er slet ikke en baggrund: det er en udtoning, der blødgør slutningen af en afkortet artikel, bunden af en liste, der scroller, eller kanten af et foto. Skriv den gennemsigtige ende som hvid med nul opacitet. Moderne browsere blander `transparent` korrekt, men `rgb(255 255 255 / 0)` siger præcis, hvad du mener, og undgår det grålige bånd, som nogle ældre motorer tegnede.

```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 udtoning, der ender i helt hvid lige før nederste kant, så den sidste tekstlinje forsvinder rent. Match slutfarven med din sides baggrund.

Er din sides baggrund en råhvid frem for helt hvid, så ton ud til den farve i stedet, ellers ender udtoningen i en synlig lysere stribe. [Gennemsigtige CSS-gradienter](https://gradiently.design/da/guide/css-gradient-transparent) går mere i dybden med udtoninger og overlays.

## Ren hvid, ikke udvasket

### Udvasket

- Ender i en neutral mellemgrå
- Ændringer så små, at de forsvinder på en telefon
- Lysegrå skrift på en råhvid gradient
- Varme og kølige råhvide blandet sammen
- Udtoning til hvid på en cremefarvet side

### Ren

- Ender i en let tonet råhvid
- En blød, men synlig ændring, tjekket på en telefon
- Næsten sort eller dyb marineblå skrift
- Én tonefamilie hele vejen igennem
- Udtoning til sidens præcise baggrundsfarve

Hvide gradienter får også striber, om end mindre end mørke; ser du trin på en stor skærm, løser et meget fint korn det, som forklaret i [striber i gradienter](https://gradiently.design/da/guide/gradient-banding).

## Hvide gradienter i minimalistiske design

Minimalistiske design står og falder med skriften, og hvid giver den intet sted at gemme sig. Brug en kraftig, næsten sort blæk, masser af luft og én detalje i farve. En hvid gradient tilføjer lige nok dybde til, at siden føles oplyst og færdig. [Minimalistiske baggrunde](https://gradiently.design/da/guide/minimalist-backgrounds) har flere idéer i samme ånd, og [hero-baggrunde til websites](https://gradiently.design/da/guide/website-hero-background) viser, hvordan en gradient i porcelæn eller morgenlys kan bære en hel landingsside.

En stående bryllupsinvitation med en blød elfenbenshvid baggrund og ordene Du er inviteret i mørk skrift

En invitation i 5×7 tommer på en blød elfenbensfarvet Mark. Mørk blæk, generøse marginer og intet andet.

I Gradiently fungerer lyse Marks på samme måde som kraftige: Marken holder et roligt område bag ordene, og Auto-blæk vælger en mørk skriftfarve fra Markens egen palet, så en sart hvid aldrig ender med grå tekst, der forsvinder.

## FAQ

### Hvad er en god kode til en hvid gradient?

Til et blødt papirlook kan du prøve `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Til et køligt porcelænslook slutter du i stedet på #e6ebf0.

### Hvordan laver jeg en gradient fra hvid til gennemsigtig i CSS?

Brug `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Skift slutfarven til din sides baggrund, hvis den ikke er helt hvid.

### Hvorfor er min hvide gradient usynlig?

Slutfarven ligger for tæt på hvid. Gør den mørkere, til omkring #efefef, let tonet varm eller kølig, og tjek den på en telefon med fuld lysstyrke.

### Hvilken tekstfarve virker på en hvid gradient?

Næsten sort, koksgrå eller dyb marineblå. Undgå lysegrå skrift, som forsvinder i gradientens mørkere ende.