Suddig bakgrund: mjukt fokus på rätt sätt

En suddig bakgrund tar bort detaljer så att något annat kan leda: ett ansikte i ett porträtt, en produkt i ett butiksfoto, en rubrik i ett inlägg, en panel i ett gränssnitt. Oskärpa fungerar eftersom blicken går till det som är skarpast. Konsten ligger i mängden. Lite oskärpa ser ut som ett objektiv, mycket gör bakgrunden till mjuk färg, och mellanläget ser oftast ut som en kamera som missat fokus.

När en suddig bakgrund hjälper

• Att lyfta fram ett motiv. Porträtt och produktbilder läses tydligare när bakgrunden är mjuk, som med ett objektiv på vid bländare.
• Att ge plats åt ord. Text över ett suddigt foto är lättare att läsa än text över ett skarpt, detaljrikt.
• Att fylla ett format. Ett liggande foto i en stående story behöver något ovanför och under. En suddig, förstorad kopia av samma foto fyller ytan med matchande färg.
• Gränssnitt i lager. Paneler av frostat glas suddar det som ligger bakom, så att panelen läses som ett eget lager samtidigt som den antyder innehållet under.
• Integritet i samtal. Videosamtalsappar suddar rummet bakom dig så att uppmärksamheten stannar på ditt ansikte.

Foto 1200×900 (4:3)

1200 × 900

Story 1080×1920

1080 × 1920

Hur mycket oskärpa ska du använda

Oskärpans styrka är relativ till bildens storlek: samma radie som knappt mjukar upp ett foto på 4 000 pixlar löser upp ett på 600. Bedöm med blicken i den storlek som folk kommer att se den. För textbakgrunder ska du gå så långt att inga kanter finns kvar bakom bokstäverna, eftersom halvsuddiga former fortfarande konkurrerar med orden. Text över bilder förklarar varför.

Ett suddigt foto är en gradient i förklädnad

Sudda ett foto kraftigt och det som återstår är dess färg, utspridd i mjuka fält: en solnedgång blir en övergång från orange till violett, en skog blir djupa gröna toner med en blek himmel högst upp. Därför blir suddiga foton så naturliga bakgrunder till de bilder de kommer från. Det är också en ledtråd: du kan bygga den gradienten direkt och få samma harmoni, skarpare kontroll och inga kompressionsartefakter.

Hur du hämtar paletten från ett foto beskrivs i färgpalett från en bild. I Gradiently gör Matcha en bild det i ett steg: släpp in en bild så får du dess palett och de närmaste Marks, eller nya som görs i dess anda.

Lösningar på de vanliga oskärpeproblemen

1. 1

   Förstora för att dölja bleka kanter

   Oskärpan drar in transparens eller mörka pixlar från utanför bilden, så kanterna blir bleka eller grå. Skala upp den suddiga kopian något över ramen så att de mjuka kanterna beskärs bort.

2. 2

   Lägg på korn mot ränder

   En kraftigt suddad bild är en uppsättning långsamma, mjuka toningar, som får ränder när de sparas som 8-bitars JPEG eller PNG. Ett lätt kornlager döljer stegen. Se gradientränder.

3. 3

   Mörkna eller ljusna för text

   Oskärpa tar bort detaljer men inte ljushet. Om texten fortfarande har det svårt kan du lägga ett mörkt eller ljust täckskikt över oskärpan tills kontrasten håller.

4. 4

   Håll färgmättnaden levande

   Oskärpa medelvärdesbildar färger, vilket kan göra dem matta. Ett litet mättnadslyft efter suddningen tar tillbaka färgen.

Suddiga bakgrunder i CSS

På webben finns två verktyg. filter: blur() suddar ett element, vilket passar en suddig kopia av en bild bakom den riktiga. backdrop-filter: blur() suddar det som ligger bakom ett element, vilket ger paneler av frostat glas. Båda kostar renderingstid, och backdrop-filter över scrollande innehåll kostar mest. Se CSS-gradienters prestanda.

/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

Frostade paneler över färgstarka bakgrunder är grunden för glassmorfism, som har egna regler för kontrast och kanter.

Alternativ till oskärpa

Ett mörkt täckskikt, en enfärgad panel bakom orden eller en duoton-behandling av fotot är de andra vanliga valen. Oskärpa är snabbast, en designad bakgrund är oftast mest kontrollerad.