# Light-Leak-Effekt: warmes Filmglühen im Design [Canonical HTML page](https://gradiently.design/de/guide/light-leaks) Diese bernsteinfarbenen Streifen am Rand alter Fotos waren ein Kamerafehler. Heute gehören sie zu den wärmsten Stimmungen im Design. So funktionieren Light Leaks und so erzeugst du überzeugende digital. ## The short version - Ein Light Leak ist ein warmes Glühen oder ein Streifen, der entsteht, wenn Streulicht durch einen Spalt in der Kamera auf den Film fällt. - Echte Light Leaks sitzen meist am Bildrand und laufen durch Rot, Orange und Gelb, oft zu Weiß hin ausblendend, wo das Licht am stärksten war. - Ein überzeugender digitaler Light Leak lässt sich mit weichen radialen oder linearen Verläufen in warmen Farben bauen, über ein Bild gelegt mit einem Bildschirm- oder Aufhellen-Mischmodus. - Light Leaks sollten von Text fernbleiben, denn ein heller Fleck hinter Worten senkt deren Kontrast. - Im Video macht ein Light Leak, der in unter einer Sekunde über das Bild zieht, einen sanften Übergang zwischen Clips. 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. - Leak am linken Rand: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)` - Eckenbrand: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)` - Senkrechter Streifen: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)` - Schimmer unten: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)` Vier klassische Leak-Positionen. Die helle Mitte liegt am oder jenseits des Bildrands, sodass nur der Abfall sichtbar ist, wie bei einem echten Leak. - Heißer Kern: #fff3c4 - Bernstein: #ffb547 - Mandarine: #f0612e - Filmrot: #c2283a - Weinrot-Verlauf: #6e1a35 Eine Light-Leak-Palette, vom hellsten Punkt des Glühens bis dorthin, wo es im Bild ausläuft. Behalte die Reihenfolge: Ein Leak wird am schwachen Ende nie gelb. ## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) von MDN listet die anderen Modi, `lighten` und `soft-light` lohnen sich ebenfalls. ```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; } ``` Ein Leak am linken Rand über einem beliebigen Bild. Der Verlauf endet in Transparent, und die Screen-Mischung heißt, dass er nur Wärme und Licht hinzufügen kann. Damit es mehr nach Film wirkt, lege Korn über alles und wärme die Schatten leicht. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) und [CSS-Verlaufsüberlagerung](https://gradiently.design/de/guide/css-gradient-overlay) behandeln beide Ebenen. > **Baue ein kleines Set, nicht einen Leak** Mache vier oder fünf Leaks in verschiedenen Positionen und Stärken und spiegle und drehe sie nach Bedarf. Echter Film leckt nie zweimal gleich, daher verrät sich der Trick am schnellsten, wenn du dieselbe Überlagerung in einem Karussell oder Raster wiederholst. 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 ### Vermeide - Einen hellen Leak hinter einer Überschrift - Denselben Leak auf jedem Bild eines Sets - Einen perfekten Glühkreis in der Mitte - Kühle blaue oder grüne Leaks auf warmen Fotos - Leaks, so stark, dass das Motiv verschwindet ### Tu - Leaks am Rand gegenüber deinen Worten - Variiere Position und Stärke in einer Serie - Lass das Glühen am oder jenseits des Bildrands beginnen - Rot zu Bernstein zu hellem Gelb, wie Film es aufzeichnet - Genug Deckkraft für Wärme, nicht ausgewaschen Light Leaks passen zu Fotografen, Filmfestivals, Musikern, Sommerkampagnen, Reisen und allem Nostalgischen. Sie verbinden sich natürlich mit Paletten für [Retro-Verläufe](https://gradiently.design/de/guide/retro-gradients) und warmen, verblassten Fotos. Zu präzisen, technischen Marken passen sie weniger, denn der ganze Sinn ist die Unperfektion. Ein Event-Post im Hochformat für ein Dachkino mit warmen Filmfarben, die von einem Rand glühen Eine warme Fläche mit dem Glühen auf einer Seite und den Worten auf der ruhigen Seite des Bildes. Ein quadratisches Musik-Release-Cover mit dem Titel Seite B in warmer, filmischer Farbe Ein quadratisches Release-Cover, bei dem Wärme und Korn die Nostalgie tragen, nicht eine unruhige Überlagerung. ## 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](https://gradiently.design/de/guide/glow-effect), für Fotografen speziell [Branding für Fotografen](https://gradiently.design/de/guide/photographer-branding). ## FAQ ### Was ist ein Light-Leak-Effekt? Ein warmes rotes, oranges oder gelbes Glühen, das entsteht, wenn Streulicht durch einen Spalt in der Kamera auf den Film fällt. Designer bauen es heute digital nach, für eine nostalgische, sonnige Stimmung. ### Wie mache ich einen Light-Leak-Effekt? Lege einen weichen warmen Verlauf, der zu transparent ausblendet, an den Rand eines Bildes und mische ihn im Modus Negativ multiplizieren oder Aufhellen, dann senke die Deckkraft und füge etwas Korn hinzu. ### Welche Farben haben Light Leaks? Meist tiefes Rot am schwachen Ende, über Orange und Bernstein zu hellem Gelb oder fast Weiß, wo das Licht am stärksten war. ### Kann ich Text über einen Light Leak setzen? Besser nicht. Der helle Teil eines Leaks senkt den Textkontrast, platziere den Leak also auf der Bildseite gegenüber deinen Worten.