Hvid gradient: subtile lyse koder til rene design

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.

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.

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.

Vil du have lidt mere farve og samme luftige fornemmelse, er pastelgradienter næste trin op. Den modsatte ende af den neutrale skala finder du i koderne til grå gradienter.

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.

Baggrunde til produktfotos 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.

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

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 går mere i dybden med udtoninger og overlays.

Ren hvid, ikke udvasket

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.

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 har flere idéer i samme ånd, og hero-baggrunde til websites viser, hvordan en gradient i porcelæn eller morgenlys kan bære en hel landingsside.

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.