Light leak effect: warm film glows in design

The light leak effect is the warm orange, red and yellow glow that appears when stray light reaches photographic film, usually through a loose back, a worn seal or a gap while loading. On film it was an accident. In design it has become a mood: nostalgic, sunlit, a little imperfect. You can recreate it with soft gradients in warm colours placed at the edge of the frame and blended over an image, and the details below are what make it look real rather than pasted on.

What a real light leak looks like

Because light enters through a gap, a leak almost always starts at an edge or a corner and fades inwards. On colour film the glow usually runs from deep red at the faint end through orange to yellow and almost white where it was strongest. It brightens rather than darkens the picture, and it has no hard outline.

• Position: an edge or corner, often one side only.
• Colour: red to orange to pale yellow, warmest at the outer edge of the glow.
• Shape: soft vertical streaks or a diffuse bloom, never a perfect circle in the middle.
• Behaviour: it adds light, washing out shadows where it falls.
• Variation: no two frames match, which is part of the charm.

Light leak gradients you can copy

Each of these is a single CSS gradient that fades to transparent, so it can sit on top of a photo or a dark background. On their own they show on a dark ground here; over a photo, blend them as described in the next section.

How to add a light leak in CSS

Put the gradient on a layer above the image and blend it with screen, which only ever lightens, just like stray light. Lower the opacity until the photo still reads clearly. MDN's mix-blend-mode reference lists the other modes; lighten and soft-light are worth trying too.

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

To make it feel more like film, add grain on top of everything and warm the shadows slightly. Grainy gradients and gradient overlay css cover both layers.

Watch the colour order too. Most unconvincing leaks either stay a flat orange from edge to edge or turn pink at the bright end. Keep the hottest point pale and slightly yellow, let it cool through amber into red, and let the red disappear into the image rather than ending on a visible edge.

Where light leaks work, and where they don't

Light leaks suit photographers, film festivals, musicians, summer campaigns, travel and anything nostalgic. They pair naturally with retro gradient palettes and warm, faded photos. They suit precise, technical brands less, because the whole point is imperfection.

Light leaks in video and motion

In video, light leaks are often used as transitions: a warm flare sweeps across the frame for half a second or so, peaks to almost white, and reveals the next clip. Keep them short and occasional. One leak between scenes feels like film; one on every cut feels like a filter pack.

For still posts that need warmth without an overlay, a warm living background does the same job more quietly. In Gradiently, a Mark's light and grain render live at every size, and its calmest area moves behind your words by itself, so a sunlit, filmic surface never puts its brightest patch behind a headline. Photos added in the Studio can also take a warm wash in the Mark's colours, so picture and background share the same glow. For the related effect of light around shapes, see glow effect; for photographers specifically, photographer branding.