Drømmende gradienter: disige pasteller og mykt lys

Drømmende gradienter er lyse, disige blandinger av nærliggende farger, lilla til fersken, pudderrosa til krem, opplyst fra ett mykt punkt så de ligner lys fremfor maling. Tre ting får dem til å fungere: svakt mettede nyanser, kanter så myke at du ikke ser hvor en farge slutter, og en lys kjerne utenfor midten. Nedenfor får du åtte koder å kopiere, en metode for å lage egne og tekstfargene som holder ordene lesbare på noe så lyst.

Hva som gjør en gradient drømmende

Drømmende er en stemning, så det hjelper å navngi delene. En drømmende gradient er stort sett svært lys: nesten alle fargene kunne blitt oppfattet som hvite i et dunkelt rom. Fargetonene er naboer, så blandingen passerer aldri gjennom grått. Og lyset har en retning. Ett område er lysere og varmere, som om solen står rett utenfor bildet, mens resten faller bort i dis.

Sammenlign med en pastellgradient, som kan være flat og munter, eller en uskarp gradient, som kan ha hvilke farger som helst. Drømmende ligger mellom dem: pastellfarger, mykt lys og litt dis over det hele.

Drømmende gradientkoder å kopiere

Hver av disse er én CSS-verdi. Radielle gradienter med en ellipse utenfor midten gir følelsen av en lyskilde; de to lineære passer bannere og lange striper der en radiell gradient ville virket skjev.

Lavendel i måneskinn er den eneste med en litt dypere kant. Den passer kveldstemaer, søvnapper og vuggeviselister, der ren kremfarge ville virket for lys.

Slik lager du en egen drømmende gradient

1. 1

   Velg en fargefamilie

   Velg to eller tre fargetoner innenfor omtrent en fjerdedel av fargesirkelen: rosa, lilla og blått, eller fersken, pudderrosa og lilla. Motsetninger som fersken og blått møtes i grått, som forklart i grumsete gradienter.

2. 2

   Øk lysheten, senk metningen

   Skyv hver farge nær hvitt. I OKLCH sikter du mot lyshet rundt 0,92 til 0,96 og kroma under omtrent 0,05. Fargen bør antydes, ikke rope.

3. 3

   Plasser lyset

   Legg det varmeste, lyseste stoppet i sentrum av en ellipse, og flytt sentrum bort fra midten, vanligvis til et øvre hjørne. Lys med en kilde gjør det bleke drømmende.

4. 4

   Spre stoppene

   Fordel stoppene vidt, så ingen overgang er smalere enn en tredjedel av bildet. Tette stopp gir ringer, og ringer bryter disen.

5. 5

   Legg til et hint av korn

   Et fint støylag med svært lav ugjennomsiktighet får flaten til å minne om film eller papir og skjuler fargebånd. Kornete gradienter viser hvordan.

En drømmende gradientbakgrunn i CSS

Én radiell gradient gir ett lys. To eller tre i lag over en lys base gir den drivende, skyaktige kvaliteten folk mener med drømmende. Bland i OKLCH så midtpartiene holder seg rene; gradientinterpolasjon forklarer hvorfor.

.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}

Slik legger du tekst på en drømmende gradient

Hvit tekst forsvinner på en drømmende gradient, og rent svart virker hardt, som et skjema stemplet på en akvarell. Svaret er en dyp tekstfarge fra samme familie: plomme på rosa og lilla, skiferblått på disige nyanser, varmt brunt på fersken. Den er tydelig lesbar og føles fortsatt som del av bildet.

Her har Gradiently sin plass. En Mark vet hvor ordene er: den flytter det roligste området bak dem, gjør fargene nær bokstavene dypere og velger lys eller mørk tekst per linje fra egen palett. Dermed koster en myk bakgrunn deg aldri lesbarhet. De generelle reglene finner du i tekst på gradient.

Hvor drømmende gradienter fungerer

Drømmende oppfattes som varsomt, personlig og uten hastverk. Det passer noen merkevarer og ikke andre. En rabattnedtelling i lilla dis virker forvirrende; en hudpleielansering i samme uttrykk føles helt riktig.

• Velvære og hudpleie: produktlanseringer, rutiner og sitater, vanligvis som Instagram-innlegg på 1080×1350.
• Bryllup og invitasjoner: en 5×7 in invitasjon på 1500×2100 med fersken- og rosatoning og navn i seriffskrift.
• Musikk og lyd: Spotify Canvas på 1080×1920 eller Apple Podcasts-omslag på 3000×3000 til rolige programmer, søvn eller ambient.
• Journaler og nyhetsbrev: en Substack-header på 1456×816 som setter en rolig tone før det første ordet.
• Mobilbakgrunner og stories: myke nok til å ligge bak ikoner eller klistremerker uten å konkurrere.

Hvis drømmende er i ferd med å bli merkevarens uttrykk fremfor ett enkelt innlegg, vurder å gjøre det til noe ingen andre kan bruke. Hver Mark i Gradiently har én eier om gangen, så den disige lilla du sikrer deg forblir din, gjengitt på nytt i hver størrelse du designer i. For den større familien av myke uttrykk, se nordlysgradienter.