Vervaagde achtergronden: zachte focus goed gedaan

Een vervaagde achtergrond haalt detail weg zodat iets anders kan leiden: een gezicht in een portret, een product op een winkelfoto, een kop op een post, een paneel in een interface. Blur werkt omdat het oog gaat naar wat het scherpst is. De kunst zit in de hoeveelheid. Een beetje blur lijkt op een lens; veel blur maakt van de achtergrond zachte kleur; het midden lijkt meestal op een camera die de scherpstelling miste.

Wanneer een vervaagde achtergrond helpt

• Een onderwerp losmaken. Portretten en productfoto’s lezen duidelijker als de achtergrond zacht is, zoals bij een lens met een grote opening.
• Ruimte maken voor woorden. Tekst over een vervaagde foto is makkelijker te lezen dan tekst over een scherpe, gedetailleerde foto.
• Een formaat vullen. Een liggende foto in een verticale story heeft iets erboven en eronder nodig; een vervaagd, vergroot exemplaar van dezelfde foto vult die ruimte in passende kleur.
• Gelaagde interfaces. Panelen van matglas vervagen wat erachter zit, zodat het paneel als aparte laag leest terwijl het de inhoud eronder laat doorschemeren.
• Privacy bij gesprekken. Videobelapps vervagen de kamer achter je zodat de aandacht op je gezicht blijft.

Foto 1200×900 (4:3)

1200 × 900

Story 1080×1920

1080 × 1920

Hoeveel blur je gebruikt

Blursterkte is relatief aan de afbeeldingsgrootte: dezelfde straal die een foto van 4000 pixels nauwelijks verzacht, lost er een van 600 pixels op. Beoordeel op het oog in het formaat waarin mensen het zien. Ga voor tekstachtergronden sterk genoeg zodat er geen randen achter de letters overblijven, want half vervaagde vormen concurreren nog steeds met de woorden; tekst over afbeeldingen legt uit waarom.

Een vervaagde foto is een verkapt kleurverloop

Vervaag een foto sterk en wat overblijft is zijn kleur, uitgesmeerd in zachte vlakken: een zonsondergang wordt een overgang van oranje naar violet, een bos wordt diepe groentinten met een bleke lucht bovenin. Daarom zijn vervaagde foto’s zulke natuurlijke achtergronden voor de afbeeldingen waar ze van komen. Het is ook een hint: je kunt dat kleurverloop direct bouwen en krijgt dezelfde harmonie, scherpere controle en geen compressieartefacten.

Om het palet uit een foto te halen, zie kleurenpalet uit een afbeelding. In Gradiently doet Een afbeelding matchen het in één stap: sleep een afbeelding erin en je krijgt het palet en de dichtstbijzijnde Marks, of nieuwe in dezelfde stijl.

De gebruikelijke blurproblemen oplossen

1. 1

   Vergroot om vervaagde randen te verbergen

   Blur trekt transparantie of donkere pixels van buiten de afbeelding naar binnen, waardoor randen bleek of grijs worden. Schaal het vervaagde exemplaar iets op voorbij het kader zodat de zachte randen worden weggesneden.

2. 2

   Voeg korrel toe tegen banding

   Een sterk vervaagde afbeelding is een verzameling langzame, gladde overgangen, die banden vormen zodra ze als 8-bit JPEG of PNG worden opgeslagen. Een lichte korrellaag verbergt de stappen; zie banding in kleurverlopen.

3. 3

   Verdonker of verlicht voor tekst

   Blur haalt detail weg maar geen helderheid. Als tekst nog steeds moeite heeft, leg dan een donkere of lichte waas over de blur tot het contrast houdt.

4. 4

   Houd de verzadiging levendig

   Blur middelt kleuren, wat ze kan dempen. Een kleine verzadigingsboost na het vervagen brengt de kleur terug.

Vervaagde achtergronden in CSS

Op het web zijn er twee gereedschappen. filter: blur() vervaagt een element, wat past bij een vervaagd exemplaar van een afbeelding achter de echte. backdrop-filter: blur() vervaagt wat achter een element zit, waarmee je panelen van matglas maakt. Beide kosten rendertijd, en backdrop-filter over scrollende inhoud kost het meest; zie prestaties van CSS-kleurverlopen.

/* 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);
}

Matte panelen over kleurrijke achtergronden zijn de basis van glassmorphism, dat zijn eigen regels voor contrast en randen heeft.

Alternatieven voor blur

Een donker dekvlak, een effen paneel achter de woorden of een duotone-behandeling van de foto zijn de andere gangbare keuzes. Blur is het snelst; een ontworpen achtergrond is meestal het meest beheerst.