# Ljusläckageeffekt: varma filmskimmer i design

[Canonical HTML page](https://gradiently.design/sv/guide/light-leaks)

De bärnstensfärgade strimmorna i kanten på ett gammalt fotografi var ett kamerafel. Nu är de en av designens varmaste stämningar. Så fungerar ljusläckage, och hur du gör övertygande digitala.

## The short version

- Ett ljusläckage är ett varmt sken eller en strimma som uppstår när ströljus når filmen genom en springa i kameran.
- Äkta ljusläckage ligger oftast i bildens kant och går genom rött, orange och gult, ofta bleknande mot vitt där ljuset var starkast.
- Ett övertygande digitalt ljusläckage kan göras med mjuka radiella eller linjära gradienter i varma färger, lagda över en bild med blandningsläget screen eller lighten.
- Ljusläckage bör hållas borta från text, eftersom en ljus fläck bakom orden sänker deras kontrast.
- I video ger ett ljusläckage som sveper över bilden i under en sekund en mjuk övergång mellan klipp.

**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.

- Läckage från vänsterkanten: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Hörnbränna: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Vertikal strimma: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Sken från nederkanten: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Fyra klassiska placeringar för ljusläckage. Den ljusa mitten ligger i eller utanför bildens kant, så bara avklingningen syns, som vid ett verkligt läckage.

- Het kärna: #fff3c4
- Bärnsten: #ffb547
- Mandarin: #f0612e
- Filmrött: #c2283a
- Vinbleknad: #6e1a35

En palett för ljusläckage, från skenets ljusaste punkt till där det dör bort i bilden. Behåll ordningen: ett läckage blir aldrig gult i den svaga änden.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) listar de andra lägena, och `lighten` och `soft-light` är också värda att prova.

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

Ett läckage från vänsterkanten över vilken bild som helst. Gradienten slutar i transparent, och screen-blandning betyder att den bara kan tillföra värme och ljus.

För att det ska kännas mer som film, lägg korn överst på allt och värm skuggorna något. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) och [gradient som overlay i CSS](https://gradiently.design/sv/guide/css-gradient-overlay) tar upp båda lagren.

> **Bygg en liten uppsättning, inte ett enda läckage** Gör fyra eller fem läckage i olika lägen och styrkor, och vänd och rotera dem efter hand. Verklig film läcker aldrig likadant två gånger, så att upprepa en overlay över en karusell eller ett rutnät är det snabbaste sättet att avslöja tricket.

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

### Undvik

- Ett starkt läckage bakom en rubrik
- Samma läckage på varje bild i en serie
- En perfekt cirkel av sken i mitten
- Kalla blå eller gröna läckage på varma foton
- Läckage så starka att motivet försvinner

### Gör så här

- Läckage på kanten mitt emot dina ord
- Variera läge och styrka över en serie
- Låt skenet börja i eller utanför bildens kant
- Rött till bärnsten till blekgult, som film registrerar det
- Tillräcklig opacitet för att kännas varmt, inte urblekt

Ljusläckage passar fotografer, filmfestivaler, musiker, sommarkampanjer, resor och allt nostalgiskt. De passar naturligt ihop med paletter för [retrogradienter](https://gradiently.design/sv/guide/retro-gradients) och varma, bleknade foton. De passar precisa, tekniska varumärken sämre, eftersom hela poängen är ofullkomligheten.

Ett stående evenemangsinlägg för en takbio med varma filmfärger som glöder från en kant

En varm yta med skenet hållet till ena sidan, och orden på den lugna sidan av bilden.

Ett fyrkantigt omslag till ett musiksläpp med titeln Sida B och varma, filmiska färger

Ett fyrkantigt släppomslag där värme och korn bär nostalgin, inte en stökig overlay.

## 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](https://gradiently.design/sv/guide/glow-effect), och för fotografer särskilt, [varumärke för fotografer](https://gradiently.design/sv/guide/photographer-branding).

## FAQ

### Vad är en ljusläckageeffekt?

Ett varmt rött, orange eller gult sken som uppstår när ströljus når filmen genom en springa i kameran. Designers återskapar det nu digitalt för en nostalgisk, solbelyst stämning.

### Hur gör jag en ljusläckageeffekt?

Placera en mjuk varm gradient som tonar ut till transparent i kanten av en bild och blanda den med blandningsläget screen eller lighten, sänk sedan opaciteten och lägg till lite korn.

### Vilka färger har ljusläckage?

Oftast djupt rött i den svaga änden, genom orange och bärnsten, till blekgult eller nästan vitt där ljuset var starkast.

### Kan jag lägga text över ett ljusläckage?

Det är bättre att låta bli. Den ljusa delen av ett läckage sänker textens kontrast, så placera läckaget på motsatt sida av bilden från dina ord.