# Lyslekk-effekt: varm filmglød i design

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

De ravfargede stripene i kanten av et gammelt fotografi var en kamerafeil. Nå er de en av designets varmeste stemninger. Slik fungerer lyslekk, og slik lager du troverdige digitale varianter.

## The short version

- En lyslekk er en varm glød eller stripe som oppstår når uønsket lys når filmen gjennom en åpning i kameraet.
- Ekte lyslekk ligger vanligvis i kanten av bildet og går gjennom rødt, oransje og gult, ofte mot hvitt der lyset var sterkest.
- En troverdig digital lyslekk kan lages med myke radielle eller lineære gradienter i varme farger, lagt over et bilde med blandingsmodusen screen eller lighten.
- Lyslekk bør holdes unna tekst, fordi et lyst felt bak ordene reduserer kontrasten.
- I video kan en lyslekk som sveiper gjennom bildet på under ett sekund, gi en myk overgang mellom klipp.

En **lyslekk-effekt** er den varme oransje, røde og gule gløden som oppstår når uønsket lys når fotografisk film, vanligvis gjennom et løst bakstykke, en slitt tetning eller en åpning under innlasting. På film var det et uhell. I design har det blitt en stemning: nostalgisk, solfylt og litt uperfekt. Du kan gjenskape den med myke gradienter i varme farger ved kanten av bildet, blandet over et fotografi. Detaljene nedenfor gjør at effekten ser ekte ut fremfor pålimt.

## Slik ser en ekte lyslekk ut

Fordi lyset kommer gjennom en åpning, starter en lyslekk nesten alltid ved en kant eller et hjørne og tones innover. På fargefilm går gløden vanligvis fra dyp rødt i den svakeste enden gjennom oransje til gult og nesten hvitt der den var sterkest. Den gjør bildet lysere, ikke mørkere, og har ingen hard kontur.

- **Plassering:** ved en kant eller et hjørne, ofte bare på én side.
- **Farge:** rødt til oransje til blekgult, varmest ved glødens ytterkant.
- **Form:** myke loddrette striper eller en diffus lysflekk, aldri en perfekt sirkel i midten.
- **Virkning:** tilfører lys og bleker skyggene der det faller.
- **Variasjon:** ingen to filmruter er like, og det er en del av sjarmen.

## Lyslekk-gradienter du kan kopiere

Hver av disse er én CSS-gradient som tones til gjennomsiktig, slik at den kan ligge over et fotografi eller en mørk bakgrunn. Her vises de alene på mørk bunn. Over et fotografi blander du dem som beskrevet i neste seksjon.

- Lyslekk fra venstre: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Brent hjørne: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Loddrett stripe: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Lysflekk nederst: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Fire klassiske plasseringer. Det lyse sentrumet ligger ved eller utenfor bildekanten, så bare uttoningen er synlig, som ved en ekte lyslekk.

- Het kjerne: #fff3c4
- Rav: #ffb547
- Mandarin: #f0612e
- Filmrød: #c2283a
- Vinrød uttoning: #6e1a35

En lyslekk-palett fra glødens lyseste punkt til der den forsvinner i bildet. Behold rekkefølgen: en lyslekk blir aldri gul i den svakeste enden.

## Slik legger du til lyslekk i CSS

Legg gradienten på et lag over bildet og bland med `screen`, som bare gjør bildet lysere, akkurat som uønsket lys. Senk opasiteten til fotografiet fortsatt er tydelig. MDNs [referanse for mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) viser de andre modusene. `lighten` og `soft-light` er også verdt å prøve.

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

En lyslekk fra venstre over et valgfritt bilde. Gradienten ender i gjennomsiktig, og screen-blanding gjør at den bare kan tilføre varme og lys.

For mer filmpreg legger du korn over alt og varmer skyggene litt. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) og [gradientoverlegg i CSS](https://gradiently.design/nb/guide/css-gradient-overlay) dekker begge lagene.

> **Lag et lite sett, ikke bare én lyslekk** Lag fire eller fem lyslekk med ulik plassering og styrke, og speil og roter dem underveis. Ekte film får aldri samme lyslekk to ganger. Å gjenta ett overlegg i en karusell eller et rutenett er den raskeste måten å avsløre trikset på.

Pass også på fargerekkefølgen. De fleste lite troverdige lyslekk holder seg ensartet oransje fra kant til kant eller blir rosa i den lyse enden. Hold det heteste punktet lyst og svakt gult, la det kjøles gjennom rav til rødt, og la rødt forsvinne inn i bildet fremfor å stoppe ved en synlig kant.

## Hvor lyslekk fungerer, og hvor det ikke gjør det

### Unngå

- En lys lyslekk bak en overskrift
- Samme lyslekk på hvert bilde i en serie
- En perfekt sirkel av glød i midten
- Kjølige blå eller grønne lyslekk på varme bilder
- Så sterke lyslekk at motivet forsvinner

### Gjør

- Legg lyslekk på motsatt kant av ordene
- Varier plassering og styrke gjennom serien
- Start gløden ved eller utenfor bildekanten
- Rødt til rav til blekgult, slik filmen registrerer det
- Nok opasitet til å virke varmt, uten å bleke bildet

Lyslekk passer til fotografer, filmfestivaler, musikere, sommerkampanjer, reise og alt nostalgisk. De passer naturlig med [retrogradientpaletter](https://gradiently.design/nb/guide/retro-gradients) og varme, falmede fotografier. De passer dårligere til presise, tekniske merkevarer, fordi hele poenget er ufullkommenhet.

Et stående arrangementsinnlegg for en kino på et tak, med varme filmfarger som gløder fra én kant

En varm overflate med gløden på én side og ordene på den rolige siden av bildet.

Et kvadratisk musikkutgivelsesomslag med tittelen Side B og varme, filmaktige farger

Et kvadratisk utgivelsesomslag der varme og korn bærer nostalgien, fremfor et travelt overlegg.

## Lyslekk i video og bevegelse

I video brukes lyslekk ofte som overganger: et varmt lysglimt sveiper gjennom bildet i omtrent et halvt sekund, topper seg mot nesten hvitt og avdekker neste klipp. Hold dem korte og bruk dem sparsomt. Én lyslekk mellom scener føles som film. Én på hvert klipp føles som en filterpakke.

For stillbildeinnlegg som trenger varme uten overlegg, gjør en varm, levende bakgrunn den samme jobben mer stille. I Gradiently gjengis Markens lys og korn live i hver størrelse, og det roligste området flytter seg bak ordene av seg selv. En solfylt, filmaktig overflate legger dermed aldri sitt lyseste felt bak en overskrift. Bilder lagt til i Studio kan også få en varm lavering i Markens farger, slik at bilde og bakgrunn deler gløden. Se [glødeffekt](https://gradiently.design/nb/guide/glow-effect) for den beslektede effekten med lys rundt former, og [profilering av fotografer](https://gradiently.design/nb/guide/photographer-branding) for fotografer spesielt.

## FAQ

### Hva er en lyslekk-effekt?

En varm rød, oransje eller gul glød som oppstår når uønsket lys når filmen gjennom en åpning i kameraet. Designere gjenskaper den nå digitalt for en nostalgisk, solfylt stemning.

### Hvordan lager jeg en lyslekk-effekt?

Legg en myk, varm gradient som tones til gjennomsiktig ved kanten av et bilde, og bland med screen eller lighten. Senk deretter opasiteten og legg til litt korn.

### Hvilke farger har lyslekk?

Vanligvis dyp rødt i den svakeste enden, gjennom oransje og rav, til blekgult eller nesten hvitt der lyset var sterkest.

### Kan jeg legge tekst over en lyslekk?

Det er bedre å la være. Den lyse delen reduserer tekstkontrasten, så plasser lyslekken på motsatt side av bildet fra ordene.