Drömska gradienter: dimmiga pasteller och mjukt ljus

En drömsk gradient är en blek, dimmig blandning av färger som ligger nära varandra, lila till persika, rodnad till grädde, upplyst från en mjuk punkt så att den ser ut som ljus snarare än färg. Tre saker får den att fungera: nyanser med låg mättnad, kanter så mjuka att du inte ser var en färg slutar, och en ljus kärna placerad en bit från mitten. Nedan finns åtta koder att kopiera, en metod för att bygga din egen och bläcket som håller orden läsbara på något så ljust.

Vad som får en gradient att se drömsk ut

Drömsk är en stämning, så det hjälper att ge delarna namn. En drömsk gradient är mest mycket ljus: nästan varje färg i den skulle passera som vit i ett dunkelt rum. Nyanserna är grannar, så blandningen går aldrig genom grått. Och ljuset har en riktning. Ett område är ljusare och varmare, som om solen låg strax utanför bild, och allt annat faller bort från det ut i dis.

Jämför med en pastellgradient, som kan vara platt och glad, eller en suddig gradient, som kan ha vilken färg som helst. Drömsk ligger mellan dem: pastellfärger, suddigt ljus och lite dis över.

Koder för drömska gradienter att kopiera

Var och en av dessa är ett enda CSS-värde. Radiella gradienter med en ellips en bit från mitten ger känslan av en ljuskälla. De två linjära är för bannrar och långa remsor där en radiell skulle se snäv ut.

Månbelyst lavendel är den enda med en något djupare kant. Den passar kvällsteman, sömnappar och vaggvisespellistor, där ren grädde skulle kännas för ljus.

Så bygger du din egen drömska gradient

1. 1

   Välj en nyansfamilj

   Välj två eller tre nyanser som ligger inom ungefär ett kvarts varv på färghjulet: rosa, lila och blått, eller persika, rodnad och lila. Motsatser som persika och blått möts i grått, vilket är problemet som beskrivs i leriga gradienter.

2. 2

   Höj ljusheten, sänk mättnaden

   Tryck varje färg nära vitt. I OKLCH, sikta på en ljushet kring 0,92 till 0,96 och en chroma under ungefär 0,05. Färgen ska vara en antydan, inte ett uttalande.

3. 3

   Placera ljuset

   Lägg det varmaste, ljusaste steget i mitten av en ellips och flytta den mitten bort från mittpunkten, oftast till ett övre hörn. Ljus som kommer någonstans ifrån är det som gör blekt till drömskt.

4. 4

   Sträck ut stegen

   Sprid stegen brett så att inget band är smalare än en tredjedel av rutan. Täta steg ger ringar, och ringar förstör disen.

5. 5

   Lägg till ett sus av korn

   Ett fint brusskikt med mycket låg opacitet får ytan att kännas som film eller papper och döljer bandning. Korniga gradienter visar hur.

En drömsk gradientbakgrund i CSS

En radiell gradient ger ett ljus. Två eller tre, lagda över en blek bas, ger den drivande, molniga kvalitet som folk menar med drömsk. Blanda i OKLCH så att mellanpartierna förblir rena. Gradientinterpolation förklarar varför.

.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å lägger du text på en drömsk gradient

Vit text försvinner på en drömsk gradient och ren svart ser hård ut, som om någon stämplat ett formulär på en akvarell. Svaret är ett djupt bläck ur samma familj: plommon på en rosa och lila blandning, skifferblått på en dimmig, ett varmt brunt på persika. Det läses tydligt och känns ändå som en del av bilden.

Här gör Gradiently skillnad. En Mark vet var orden finns: den flyttar sin lugnaste region bakom dem, fördjupar färgerna nära bokstäverna och väljer ljust eller mörkt bläck per rad ur sin egen palett, så en mjuk bakgrund aldrig kostar dig läsbarhet. För de allmänna reglerna, läs text på en gradient.

Där drömska gradienter fungerar

Drömsk läses som mild, personlig och ohastig. Det gör den rätt för vissa varumärken och fel för andra. En rabattnedräkning i lila dis känns förvirrad, en hudvårdslansering i den känns precis rätt.

• Välmående och hudvård: produktsläpp, rutiner och citat, oftast som Instagraminlägg i 1080×1350.
• Bröllop och inbjudningar: en inbjudan på 5×7 tum i 1500×2100 med en persika- och rodnadston och ett namn i serif.
• Musik och ljud: en Spotify canvas i 1080×1920 eller ett Apple Podcasts-omslag i 3000×3000 för lugna, sömn- eller ambientprogram.
• Dagböcker och nyhetsbrev: en rubrikbild för Substack-inlägg i 1456×816 som sätter en stillsam ton före det första ordet.
• Mobilbakgrunder och stories: mjuka nog att ligga bakom ikoner eller dekaler utan att slåss med dem.

Om drömsk håller på att bli ditt varumärkes look snarare än ett enskilt inlägg, överväg att göra den till något ingen annan kan använda. Varje Mark på Gradiently har en ägare i taget, så ett dimmigt lila som du säkrar förblir ditt, renderat på nytt i varje storlek du designar i. För den bredare familjen av mjuka looks, se norrskensgradienter.