Vit gradient: subtila ljuskoder för rena designer

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.

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.

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.

Vill du ha lite mer färg men behålla samma luftiga känsla är pastellgradienter nästa steg. För andra änden av den neutrala skalan, se koderna för grå 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.

Bakgrunder för produktfoton 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.

/* 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;
}

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 går djupare in på gradienter och överlagringar.

Ren vit, inte urvattnad

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.

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 har fler idéer i samma anda, och hero-bakgrunder för webbplatser visar hur en gradient i porslin eller morgonljus kan bära en hel landningssida.

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.