Light-Leak-Effekt: warmes Filmglühen im Design

Der Light-Leak-Effekt ist das warme orange, rote und gelbe Glühen, das entsteht, wenn Streulicht auf Fotofilm fällt, meist durch eine lockere Rückwand, eine abgenutzte Dichtung oder einen Spalt beim Einlegen. Auf Film war es ein Unfall. Im Design ist es zu einer Stimmung geworden: nostalgisch, sonnig, ein wenig unperfekt. Du kannst es mit weichen Verläufen in warmen Farben am Bildrand nachbauen, über ein Bild gemischt, und die Details unten lassen es echt statt aufgeklebt wirken.

Wie ein echter Light Leak aussieht

Weil das Licht durch einen Spalt eintritt, beginnt ein Leak fast immer an einem Rand oder einer Ecke und blendet nach innen aus. Auf Farbfilm läuft das Glühen meist vom tiefen Rot am schwachen Ende über Orange zu Gelb und fast Weiß, wo es am stärksten war. Es hellt das Bild auf, statt es abzudunkeln, und hat keine harte Kontur.

• Position: ein Rand oder eine Ecke, oft nur eine Seite.
• Farbe: Rot zu Orange zu hellem Gelb, am wärmsten am äußeren Rand des Glühens.
• Form: weiche senkrechte Streifen oder ein diffuser Schimmer, nie ein perfekter Kreis in der Mitte.
• Verhalten: Er fügt Licht hinzu und wäscht Schatten aus, wo er fällt.
• Variation: Keine zwei Bilder gleichen sich, das ist Teil des Charmes.

Light-Leak-Verläufe zum Kopieren

Jeder davon ist ein einzelner CSS-Verlauf, der zu transparent ausblendet, sodass er über einem Foto oder dunklem Hintergrund liegen kann. Für sich allein sind sie hier auf dunklem Grund zu sehen. Über einem Foto mischst du sie wie im nächsten Abschnitt beschrieben.

So fügst du einen Light Leak in CSS hinzu

Lege den Verlauf auf eine Ebene über dem Bild und mische ihn mit screen, das nur aufhellt, genau wie Streulicht. Senke die Deckkraft, bis das Foto noch klar lesbar ist. Die mix-blend-mode-Referenz von MDN listet die anderen Modi, lighten und soft-light lohnen sich ebenfalls.

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

Damit es mehr nach Film wirkt, lege Korn über alles und wärme die Schatten leicht. Körnige Verläufe und CSS-Verlaufsüberlagerung behandeln beide Ebenen.

Achte auch auf die Farbreihenfolge. Die meisten unüberzeugenden Leaks bleiben entweder von Rand zu Rand ein flaches Orange oder werden am hellen Ende rosa. Halte den heißesten Punkt blass und leicht gelblich, lass ihn über Bernstein ins Rot abkühlen und lass das Rot im Bild verschwinden, statt an einer sichtbaren Kante zu enden.

Wo Light Leaks wirken und wo nicht

Light Leaks passen zu Fotografen, Filmfestivals, Musikern, Sommerkampagnen, Reisen und allem Nostalgischen. Sie verbinden sich natürlich mit Paletten für Retro-Verläufe und warmen, verblassten Fotos. Zu präzisen, technischen Marken passen sie weniger, denn der ganze Sinn ist die Unperfektion.

Light Leaks in Video und Motion

Im Video werden Light Leaks oft als Übergänge genutzt: Ein warmes Aufleuchten zieht etwa eine halbe Sekunde über das Bild, erreicht fast Weiß und gibt den nächsten Clip frei. Halte sie kurz und gelegentlich. Ein Leak zwischen Szenen wirkt wie Film, einer an jedem Schnitt wie ein Filterpaket.

Für stehende Posts, die Wärme ohne Überlagerung brauchen, erledigt ein warmer lebendiger Hintergrund dieselbe Aufgabe leiser. In Gradiently werden Licht und Korn eines Mark in jeder Größe live gerendert, und sein ruhigster Bereich wandert von selbst hinter deine Worte, sodass eine sonnige, filmische Fläche ihren hellsten Fleck nie hinter eine Überschrift legt. Im Studio hinzugefügte Fotos können auch eine warme Tönung in den Farben des Mark erhalten, sodass Bild und Hintergrund dasselbe Glühen teilen. Für den verwandten Effekt von Licht um Formen siehe Glow-Effekt, für Fotografen speziell Branding für Fotografen.