Drømmende gradienter: duggede pasteller og blødt lys

En drømmende gradient er en bleg, duggen blanding af farver, der ligger tæt sammen, lilla over i fersken, rødmen over i fløde, oplyst fra ét blødt punkt, så den ligner lys frem for maling. Tre ting får den til at virke: nuancer med lav mætning, kanter så bløde, at du ikke kan se, hvor en farve stopper, og en lys kerne placeret ude fra midten. Nedenfor er otte koder, du kan kopiere, en metode til at bygge din egen og det blæk, der holder ord læselige på noget så lyst.

Hvad får en gradient til at se drømmende ud

Drømmende er en stemning, så det hjælper at navngive delene. En drømmende gradient er for det meste meget lys: næsten hver farve i den ville gå for hvid i et dunkelt rum. Nuancerne er naboer, så blandingen aldrig krydser gennem gråt. Og lyset har en retning. Ét område er lysere og varmere, som om solen lige var uden for billedet, og alt andet falder væk fra det ind i dis.

Sammenlign med en pastelgradient, som kan være flad og munter, eller en sløret gradient, som kan have en hvilken som helst farve. Drømmende ligger imellem: pastelfarver, sløret lys og lidt dis ovenpå.

Koder til drømmende gradienter at kopiere

Hver af dem er én CSS-værdi. Radiale gradienter med en ellipse ude fra midten giver fornemmelsen af en lyskilde; de to lineære er til bannere og lange strimler, hvor en radial ville se skæv ud.

Måneskinslavendel er den eneste med en lidt dybere kant. Den passer til aftentemaer, søvnapps og vuggevise-playlister, hvor ren fløde ville føles for lys.

Sådan bygger du din egen drømmende gradient

1. 1

   Vælg en nuancefamilie

   Vælg to eller tre nuancer, der ligger inden for omkring en kvart omgang af farvehjulet: pink, lilla og blå, eller fersken, rødmen og lilla. Modsætninger som fersken og blå mødes i gråt, hvilket er problemet beskrevet i mudrede gradienter.

2. 2

   Hæv lysheden, sænk mætningen

   Skub hver farve tæt på hvid. I OKLCH skal du sigte efter en lyshed omkring 0,92 til 0,96 og en kromatik under cirka 0,05. Farven skal være et hint, ikke en erklæring.

3. 3

   Placér lyset

   Læg det varmeste, lyseste stop i midten af en ellipse, og flyt midten væk fra midten, som regel til et hjørne foroven. Lys, der kommer fra et sted, er det, der gør bleg til drømmende.

4. 4

   Stræk stoppene

   Spred stoppene bredt, så intet bånd er smallere end en tredjedel af billedet. Stramme stop laver ringe, og ringe bryder disen.

5. 5

   Tilføj et hvisk af korn

   Et fint støjlag ved meget lav opacitet får overfladen til at føles som film eller papir og skjuler bånd. Kornede gradienter viser hvordan.

En drømmende gradientbaggrund i CSS

Én radial gradient giver ét lys. To eller tre, lagt oven på en bleg bund, giver den drivende, skyede kvalitet, folk mener med drømmende. Bland i OKLCH, så midten forbliver ren; gradientinterpolation 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%);
}

Sådan sætter du tekst på en drømmende gradient

Hvid tekst forsvinder på en drømmende gradient, og helt sort ser hårdt ud, som om nogen havde stemplet en formular ned i en akvarel. Svaret er et dybt blæk fra samme familie: blomme på en blanding af pink og lilla, skiferblå på en diset, et varmt brunt på fersken. Det læses tydeligt og føles stadig som en del af billedet.

Det er her, Gradiently gør sig fortjent. En Mark ved, hvor ordene er: den flytter sit roligste område bag dem, uddyber farverne nær bogstaverne og vælger lyst eller mørkt blæk pr. linje fra sin egen palet, så en blød baggrund aldrig koster dig læselighed. For de generelle regler, læs tekst på en gradient.

Hvor drømmende gradienter virker

Drømmende læses som blidt, personligt og uhastet. Det gør det rigtigt for nogle brands og forkert for andre. En nedtælling til et tilbud i lilla dis føles forvirret; en hudplejelancering i den føles helt rigtig.

• Wellness og hudpleje: produktlanceringer, rutiner og citater, som regel som Instagram-opslag i 1080×1350.
• Bryllupper og invitationer: en invitation på 5×7 in i 1500×2100 med en fersken- og rødmen-vask og et navn i serif.
• Musik og lyd: et Spotify-canvas i 1080×1920 eller et Apple Podcasts-cover i 3000×3000 til rolige, søvn- eller ambientprogrammer.
• Journaler og nyhedsbreve: en Substack-opslagsheader i 1456×816, der slår en stille tone an før det første ord.
• Telefonbaggrunde og stories: bløde nok til at ligge bag ikoner eller klistermærker uden at kæmpe med dem.

Hvis drømmende er ved at blive dit brands udtryk frem for ét opslag, så overvej at gøre det til noget, ingen andre kan bruge. Hver Mark på Gradiently har én ejer ad gangen, så en dugget lilla, du sikrer dig, forbliver din, renderet frisk i hver størrelse, du designer i. For den bredere familie af bløde udtryk, se aurora-gradienter.