# Vit gradient: subtila ljuskoder för rena designer

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

En vit gradient är den tystaste gradienten som finns, och den som de flesta designers gör lite fel. De här koderna visar hur mycket förändring som räcker, vilka nyanser du ska använda och hur du tonar rent till vitt.

## The short version

- En vit gradient blandar ren vit med en off-white som bara är några procent mörkare, med en varm, sval eller pärlemorskimrande ton.
- Off-white med en svag varm ton känns som papper; med en svag blå ton känns den som porslin eller snö.
- En vit gradient behöver tillräckligt stort omfång för att klara ljusa telefonskärmar, där mycket små skillnader försvinner.
- För att tona innehåll in i en vit bakgrund i CSS använder du en gradient från `rgb(255 255 255 / 0)` till `#ffffff`.
- Vita gradienter är utmärkta produktbakgrunder eftersom ett mjukt ljusfall läses som en upplyst studio i stället för ett platt urklipp.

En **vit gradient** går från ren vit till en off-white som bara är lite mörkare, oftast med en lätt varm, sval eller pärlemorskimrande ton. Förändringen är liten med flit: den ska kännas som ljus som faller över en yta, inte som färg. Det gör vita gradienter idealiska för rena webbplatser, produktbilder, inbjudningar och minimalistiska inlägg i sociala medier. Här får du veta hur stark en sådan ska vara, en palett av off-white-toner, kodrader att kopiera och rätt sätt att tona till vitt i CSS.

## Hur stor förändring en vit gradient behöver

För lite och ingen ser den, särskilt på en telefon med full ljusstyrka. För mycket och vitt blir grått och smutsigt. Tabellen visar tre styrkor, mätta efter hur långt slutfärgen ligger under ren vit. De flesta designer vill ha den i mitten.

| Styrka | Från | Till | Använd till |
| --- | --- | --- | --- |
| Viskning | `#ffffff` | `#f8f8f8` | Stora webbsektioner, längre läsning |
| Mjuk | `#ffffff` | `#efefef` | Kort, inlägg i sociala medier, inbjudningar |
| Synlig | `#ffffff` | `#e2e2e2` | Produktbakgrunder, studiobakgrunder |

Neutrala värden för tydlighetens skull. I praktiken ger du slutfärgen en svagt varm eller sval ton, som i koderna nedan.

## Off-white-färger att bygga från

Rent neutrala gråtoner i slutet av en vit gradient ser lite livlösa ut. En antydan till ton gör skillnaden: varma off-white-toner läses som papper, linne och elfenben; svala läses som porslin, frost och snö. Välj den ton som passar resten av din palett och håll fast vid den genom en hel serie designer.

- Ren vit: #ffffff
- Elfenben: #fffdf8
- Papper: #f6f4f0
- Linne: #f1ece3
- Porslin: #f1f4f7
- Frost: #eaf2f8
- Pärlemorlila: #f3eef8
- Pärlemormint: #eef6f6

Off-white-toner. På en vit sida ser de nästan identiska ut; sida vid sida skiljer sig de varma och svala familjerna tydligt.

## Koder för vit gradient

Var och en av dessa börjar vid eller nära ren vit. Papper och elfenben är varma och redaktionella. Porslin och frost är svala och tekniska. Morgonljus ger ett mjukt sken från ett hörn, och pärlemor blandar flera knappt synliga toner till en känslig irisering som aldrig tippar över i en regnbåge.

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

Sex vita gradienter. På en ljus skärm läses de som ytor snarare än färger, och det är just poängen.

Vill du ha lite mer färg men behålla samma luftiga känsla är [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) nästa steg. För andra änden av den neutrala skalan, se koderna för [grå gradient](https://gradiently.design/sv/guide/grey-gradient).

## En vit gradient bakom produkter

Fotografer belyser en vit bakgrund så att den faller av mjukt mot kanterna, vilket skiljer föremålet från bakgrunden utan någon skuggkant. En radiell vit gradient gör samma sak på skärmen. Den är särskilt användbar när du friställer en produkt från fotot: en platt vit yta bakom ser pålimmad ut, medan ett mjukt ljusfall ser ut som en studio.

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

Ljusast strax ovanför mitten, där produkten står, och avtagande till ljusgrått i hörnen. Använd den i 2048×2048 för produktbilder i Shopify.

[Bakgrunder för produktfoton](https://gradiently.design/sv/guide/product-photo-backgrounds) går igenom skuggor, färgbakgrunder och när vitt är fel val.

## Gradient till vitt med en CSS-gradient

Den vanligaste vita gradienten på webben är inte en bakgrund alls: det är en gradient som mjukar upp slutet på en avklippt artikel, botten på en scrollande lista eller kanten på ett foto. Skriv den transparenta änden som vitt med noll opacitet. Moderna webbläsare blandar `transparent` rätt, men `rgb(255 255 255 / 0)` säger exakt vad du menar och undviker det gråaktiga bandet som vissa äldre motorer ritade.

```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 gradient som slutar i ren vit strax före nederkanten, så att sista textraden försvinner rent. Anpassa slutfärgen till sidans bakgrund.

Om sidans bakgrund är en off-white i stället för ren vit, tona mot den färgen i stället, annars slutar gradienten i en synlig ljusare rand. [CSS-gradient transparent](https://gradiently.design/sv/guide/css-gradient-transparent) går djupare in på gradienter och överlagringar.

## Ren vit, inte urvattnad

### Urvattnad

- Slutar i en neutral mellangrå
- Förändringar så små att de försvinner på en telefon
- Ljusgrå text på en off-white gradient
- Varma och svala off-white-toner blandade
- Gradient till vitt på en gräddvit sida

### Ren

- Slutar i en lätt tonad off-white
- En mjuk men synlig förändring, kontrollerad på en telefon
- Text i nästan-svart eller djup marinblått
- En tonfamilj genomgående
- Gradient till sidans exakta bakgrundsfärg

Vita gradienter får också band, om än mindre än mörka; ser du steg på en stor monitor löser ett mycket fint korn det, som förklaras i [gradientband](https://gradiently.design/sv/guide/gradient-banding).

## Vita gradienter i minimalistiska designer

Minimalistiska designer står och faller med typografin, och vitt ger den ingenstans att gömma sig. Använd ett kraftigt nästan-svart bläck, gott om luft och en detalj i färg. En vit gradient ger precis tillräckligt med dimension för att sidan ska kännas upplyst och färdig. [Minimalistiska bakgrunder](https://gradiently.design/sv/guide/minimalist-backgrounds) har fler idéer i samma anda, och [hero-bakgrunder för webbplatser](https://gradiently.design/sv/guide/website-hero-background) visar hur en gradient i porslin eller morgonljus kan bära en hel landningssida.

En stående bröllopsinbjudan med mjuk elfenbensvit bakgrund och orden Du är inbjuden i mörk text

En inbjudan på 5×7 tum på en mjuk elfenbensfärgad Mark. Mörkt bläck, generösa marginaler och inget annat.

I Gradiently fungerar ljusa Marks på samma sätt som kraftfulla: Marken behåller en lugn yta bakom orden och Auto-bläck väljer en mörk textfärg ur Markens egen palett, så att en känslig vit aldrig får grå text som försvinner.

## FAQ

### Vad är en bra kod för vit gradient?

För ett mjukt papperslook, prova `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. För ett svalt porslinslook, avsluta i #e6ebf0 i stället.

### Hur gör jag en vit till transparent gradient i CSS?

Använd `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Byt slutfärg till din sidas bakgrund om den inte är ren vit.

### Varför syns inte min vita gradient?

Slutfärgen ligger för nära vitt. Gör den mörkare, runt #efefef, med en svagt varm eller sval ton, och kontrollera den på en telefon med full ljusstyrka.

### Vilken textfärg fungerar på en vit gradient?

Nästan-svart, kolgrått eller djup marinblått. Undvik ljusgrå text, som flyter ihop med den mörkare änden av gradienten.