Light leak-effect: warme filmgloed in design

Het light leak-effect is de warme oranje, rode en gele gloed die ontstaat als vals licht fotografische film bereikt, meestal door een losse achterwand, een versleten afdichting of een spleet tijdens het laden. Op film was het een ongelukje. In design is het een sfeer geworden: nostalgisch, zonnig, een beetje onvolmaakt. Je maakt het na met zachte verlopen in warme kleuren aan de rand van het beeld, over een afbeelding gemengd, en de details hieronder zorgen dat het echt oogt in plaats van erop geplakt.

Hoe een echte light leak eruitziet

Omdat het licht door een spleet binnenkomt, begint een leak bijna altijd aan een rand of hoek en vervaagt naar binnen. Op kleurenfilm loopt de gloed meestal van diep rood aan het zwakke uiteinde via oranje naar geel en bijna wit waar hij het sterkst was. Hij maakt het beeld lichter, niet donkerder, en heeft geen harde contour.

• Positie: een rand of hoek, vaak maar één kant.
• Kleur: rood naar oranje naar lichtgeel, het warmst aan de buitenrand van de gloed.
• Vorm: zachte verticale strepen of een diffuse gloed, nooit een perfecte cirkel in het midden.
• Gedrag: het voegt licht toe en wast schaduwen uit waar het valt.
• Variatie: geen twee beelden zijn gelijk, en dat is een deel van de charme.

Light leak-verlopen om te kopiëren

Elk daarvan is één CSS-verloop dat naar transparant vervaagt, zodat het op een foto of donkere achtergrond kan liggen. Op zichzelf staan ze hier op een donkere ondergrond; over een foto mix je ze zoals in het volgende deel is beschreven.

Een light leak toevoegen in CSS

Zet het verloop op een laag boven de afbeelding en mix het met screen, dat alleen maar lichter maakt, net als vals licht. Verlaag de dekking tot de foto nog duidelijk leest. De mix-blend-mode-referentie van MDN somt de andere modi op; lighten en soft-light zijn ook het proberen waard.

.photo {
  position: relative;
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 80% at 0% 50%,
    #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

Voor een meer filmische indruk voeg je korrel over alles toe en warm je de schaduwen een beetje op. Korrelige verlopen en CSS-verloop als overlay behandelen beide lagen.

Let ook op de kleurvolgorde. De meeste onovertuigende leaks blijven van rand tot rand een vlak oranje of worden roze aan het heldere uiteinde. Houd het heetste punt bleek en licht geelachtig, laat het via amber afkoelen naar rood en laat het rood in het beeld verdwijnen in plaats van op een zichtbare rand te eindigen.

Waar light leaks werken, en waar niet

Light leaks passen bij fotografen, filmfestivals, muzikanten, zomercampagnes, reizen en alles wat nostalgisch is. Ze combineren vanzelf met paletten van retroverlopen en warme, vervaagde foto’s. Bij precieze, technische merken passen ze minder, want het hele punt is onvolmaaktheid.

Light leaks in video en animatie

In video worden light leaks vaak als overgang gebruikt: een warme flits veegt een halve seconde over het beeld, piekt tot bijna wit en onthult de volgende clip. Houd ze kort en zeldzaam. Eén leak tussen scènes voelt als film; één op elke montage voelt als een filterpakket.

Voor stilstaande posts die warmte nodig hebben zonder overlay doet een warme levende achtergrond hetzelfde werk rustiger. In Gradiently renderen het licht en de korrel van een Mark live op elk formaat en het rustigste gebied verplaatst zich vanzelf achter je woorden, zodat een zonnig, filmisch vlak zijn helderste plek nooit achter een kop zet. Foto’s die je in de Studio toevoegt kunnen ook een warme waas in de kleuren van de Mark krijgen, zodat beeld en achtergrond dezelfde gloed delen. Voor het verwante effect van licht rond vormen zie je gloedeffect; voor fotografen specifiek branding voor fotografen.