Ljusläckageeffekt: varma filmskimmer i design

Ljusläckageeffekten är det varma orange, röda och gula skenet som uppstår när ströljus når fotografisk film, oftast genom ett löst bakstycke, en sliten tätning eller en springa vid laddning. På film var det en olycka. I design har det blivit en stämning: nostalgisk, solbelyst, lite ofullkomlig. Du kan återskapa det med mjuka gradienter i varma färger placerade i bildens kant och blandade över en bild, och detaljerna nedan är det som får det att se äkta ut i stället för pålimmat.

Hur ett äkta ljusläckage ser ut

Eftersom ljuset kommer in genom en springa börjar ett läckage nästan alltid vid en kant eller ett hörn och bleknar inåt. På färgfilm går skenet oftast från djupt rött i den svaga änden genom orange till gult och nästan vitt där det var starkast. Det ljusar upp bilden i stället för att göra den mörkare, och det har ingen hård kontur.

• Placering: en kant eller ett hörn, ofta bara en sida.
• Färg: rött till orange till blekgult, varmast i skenets yttre kant.
• Form: mjuka vertikala strimmor eller ett diffust sken, aldrig en perfekt cirkel i mitten.
• Beteende: det tillför ljus och tvättar ut skuggor där det faller.
• Variation: inga två bilder är lika, vilket är en del av charmen.

Gradienter för ljusläckage att kopiera

Var och en av dessa är en enda CSS-gradient som tonar ut till transparent, så den kan ligga ovanpå ett foto eller en mörk bakgrund. Ensamma syns de här mot mörk botten, och över ett foto blandar du dem som beskrivs i nästa avsnitt.

Så lägger du till ett ljusläckage i CSS

Lägg gradienten på ett lager ovanför bilden och blanda den med screen, som bara ljusar upp, precis som ströljus. Sänk opaciteten tills fotot fortfarande syns tydligt. MDN:s referens för mix-blend-mode listar de andra lägena, och lighten och soft-light är också värda att prova.

.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;
}

För att det ska kännas mer som film, lägg korn överst på allt och värm skuggorna något. Korniga gradienter och gradient som overlay i CSS tar upp båda lagren.

Se också till färgordningen. De flesta oövertygande läckage förblir antingen en platt orange från kant till kant eller blir rosa i den ljusa änden. Håll den hetaste punkten blek och något gul, låt den svalna genom bärnsten till rött, och låt det röda försvinna in i bilden i stället för att sluta i en synlig kant.

Där ljusläckage fungerar, och där de inte gör det

Ljusläckage passar fotografer, filmfestivaler, musiker, sommarkampanjer, resor och allt nostalgiskt. De passar naturligt ihop med paletter för retrogradienter och varma, bleknade foton. De passar precisa, tekniska varumärken sämre, eftersom hela poängen är ofullkomligheten.

Ljusläckage i video och rörelse

I video används ljusläckage ofta som övergångar: en varm flare sveper över bilden i ungefär en halv sekund, når nästan vitt och avslöjar nästa klipp. Håll dem korta och enstaka. Ett läckage mellan scener känns som film, ett på varje klipp känns som ett filterpaket.

För stillbilder som behöver värme utan en overlay gör en varm levande bakgrund samma jobb mer stilla. I Gradiently renderas en Marks ljus och korn live i varje storlek, och dess lugnaste yta flyttar sig bakom dina ord av sig själv, så att en solbelyst, filmisk yta aldrig lägger sin ljusaste fläck bakom en rubrik. Foton som läggs till i Studio kan också få en varm lavering i Markens färger, så att bild och bakgrund delar samma sken. För den närliggande effekten av ljus runt former, se glödeffekt, och för fotografer särskilt, varumärke för fotografer.