Suddiga gradienter: mjukfokusfärg som känns modern

En suddig gradient är färg utan kanter: några mjuka former på en botten, suddade tills allt som återstår är ljus som glider från en färgton till nästa. Den ser ut som ett fotografi taget genom frostat glas, eller ett objektiv som dragits ur fokus på en upplyst stad. Den mjukheten är därför den passar välmåendeappar, musik, hudvård, lugn teknik och bakgrundsbilder. Metoden är enkel: former först, sedan mycket sudd, sedan korn. Detaljerna nedan är skillnaden mellan drömskt och smetigt.

Suddiga gradienter jämfört med norrskens- och mesh-gradienter

De här tre blandas ihop eftersom alla ser mjuka ut. De kommer från olika idéer, och att välja rätt ändrar uppdraget.

Så gör du en suddig gradient

1. 1

   Välj en botten

   Ett blekt off-white för luftigt, ett djupt bläck för glödande. Bottnen fyller varje lucka formerna lämnar.

2. 2

   Välj tre eller fyra närliggande färger

   Färger nära varandra på hjulet, som rosa, lila och himmelsblått, blandas till rena mellantoner. Läs analoga färger för fler kombinationer.

3. 3

   Rita stora, överlappande former

   Tre till fem cirklar eller ovaler, var och en täcker en fjärdedel till hälften av ytan. Låt några gå utanför kanterna.

4. 4

   Sudda hårt

   Lägg på en gaussisk oskärpa på ungefär 10 till 20 procent av ytans kortare sida. På ett inlägg som är 1080 pixlar brett är det omkring 110 till 220 pixlar.

5. 5

   Lägg till korn

   Ett fint brusskikt med 3 till 6 procents opacitet döljer ränder och hindrar resultatet från att se plastigt ut.

6. 6

   Kontrollera i telefonstorlek

   Förminska den. Om någon form fortfarande har en synlig kant, sudda mer eller gör formen större.

Färgrecept för suddiga gradienter

Varje färgprov approximerar det färdiga utseendet i en enda gradient, så du kan kopiera det rakt in i CSS eller använda färgerna som dina former. Elliptiska radiella gradienter med förskjutna lägen kommer förvånansvärt nära en riktig suddning.

Välj familj efter vad som ligger ovanpå. Bleka suddningar bär mörk text väl och passar hudvård, brevpapper, välmående och redaktionella omslag. Mörka suddningar får ljus text att glöda och passar nattliv, musik och sena evenemang. En neutral suddning som linne fungerar som en stillsam kuliss för produktbilder, där färgen aldrig ska konkurrera med föremålet. För fler mjuka paletter, se drömska gradienter.

Hur mycket sudd en suddig gradient behöver

De flesta suddiga gradienter misslyckas genom att inte vara tillräckligt suddiga. En form suddad med 30 pixlar på en yta som är 1080 pixlar bred är fortfarande en form med mjuk kant, som läses som en fläck. Utseendet kräver att suddet är så stort att du inte kan avgöra var en form slutar.

En suddig gradient i CSS

På webben har du två vägar. Lagrade radiella gradienter som tonar ut till transparent är billiga och renderas direkt. Riktiga suddade element ser mjukare ut och kan driva, men kostar mer att rita. För en statisk bakgrund räcker oftast lagren.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Om du behöver en frostad panel över en suddig bakgrund snarare än själva bakgrunden är det backdrop-filter, som tas upp i CSS backdrop filter.

Varför suddiga gradienter ser billiga ut, och lösningen

Ränder är det som fångar alla, eftersom ett sudd skapar långa, milda övertoningar över många pixlar. Lite korn löser det. Gradientränder förklarar varför. Och om två av dina färger möts i grått, byt ut en mot en granne, som i leriga gradienter.

Gradiently Marks innehåller mjuka, diffusa material med inbyggt korn, och de håller ytan bakom dina ord lugn, så ett suddigt utseende aldrig sväljer rubriken. Du kan designa med valfri osäkrad Mark gratis i Studio.