Hvit gradient: diskrete lyskoder til rene design

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.

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.

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.

Hvis du ønsker litt mer farge med samme luftige følelse, er pastellgradienter neste steg. Se kodene for grå 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.

Bakgrunner til produktbilder 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.

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

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 går grundigere gjennom overganger og overlegg.

Rent hvitt uten et utvasket preg

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.

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 har flere ideer i samme ånd, og hero-bakgrunner til nettsteder viser hvordan en gradient i porselen eller morgenlys kan bære en hel landingsside.

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.