The light leak effect on a website

A light leak is a warm flow that enters the image through a corner, as if the back of the camera had come ajar during the shot. On a site, it gives the page a time of day: a late afternoon, a summer, a memory. Of the ten textures in the studio’s library, it is the only one with a direction. Grain and scan lines cover the screen evenly; the leak gives it a top and a bottom, a side the daylight comes from.

Without

Light leak

The demo poster is cold, slate and cobalt, and the flow turns powder pink in the top right corner. That is exactly the limit the library points out: on a cold blue, the leak holds up poorly.

Where the effect comes from

In film photography, the film reacts to any light: when the camera is no longer light-tight, stray light fogs the film. In 1933, the British magazine Amateur Photographer already listed the causes for roll-film negatives: a back that doesn’t close properly, light getting in through the film-advance key, a worn spot in the bellows of a folding camera. The article also gave a clue for finding the culprit: when the fog touches the image but spares the edges of the negative, the light came in through the camera.

The flaw then became a style. In the 1990s, lomography, born in Vienna, celebrated what careful photography tried to avoid: blur, overexposure, heavy vignetting, light leaks. The Holga, a cheap camera with a plastic body released in 1982, found its audience thanks to this movement. In the 2000s and 2010s, phone apps, Hipstamatic and Instagram first among them, imitated this look with filters that added fake light leaks (PetaPixel, 2024). The library takes up the tamed version: a warm light that never eats the subject.

When to use it

Three of the studio’s twenty-four ready-made layouts use it:

• the Lodging layout, for campsites, holiday rentals and hotels. The background there changes scene as you scroll down, and the leak adds the light of a day’s end;
• the Event layout, for festivals, trade shows and parties, where it goes with grain;
• the Wellness layout, for yoga, massage and therapies, where it warms the paper texture.

It also suits trades that tell of a moment: a B&B, a wedding photographer, a seaside ice-cream shop, an open-air dance café. It likes warm palettes, ochres, brick reds, oranges, and videos shot in golden light.

It is better left out:

• on a cold palette. The flow takes its hue from the site’s accent color, mixed with a pale orange: on a blue image, it turns powder pink, and with a blue accent, a lavender halo that no longer evokes the sun;
• when the top right corner carries something important. The layer is strongest there, and that is often where the navigation button sits: check that it still reads;
• on a site that must look neutral and precise: a medical practice, a software product, an engineering office. Stray light there passes for a flaw.

The right dose

In the library, the leak is set at 28% opacity, in screen blend mode (screen). This mode can only lighten: where the layer is black, nothing changes, and where it is light, the image lights up, like two projectors aimed at the same screen (MDN).

The light starts from the top right corner. A wide gradient tinted with the accent and a pale orange spreads out there, and an almost white spot, slightly offset inward, forms the heart of the burn. At 28%, you notice it without it covering the image; stronger, it starts washing out what passes beneath.

The rule of two layers at most applies here as elsewhere: at the third, the image gets dirty, and nobody knows which one to remove anymore. The Event and Wellness layouts are already at that ceiling, with grain for one, paper for the other. Also avoid doubling the light: halation, which also takes the accent color in screen blending, would make the page glow twice.

What it costs

Almost nothing. The layer is made of two radial gradients the browser draws itself: no file to download, no image to decode. It sits in a fixed position, and catches neither clicks nor scrolling.

Above all, it doesn’t move. A browser can cheaply animate a layer’s position and opacity; almost everything else forces it to repaint (web.dev), and light pulsing across the whole screen would make it repaint every frame. Only its intensity changes, at the start: the first screen stays bare, to leave the welcome video intact, and the leak rises as you scroll down.

Accessibility

• Contrast. screen blending lightens everything it touches, text included. In the lit corner, text loses contrast, whether it is light on dark or dark on light. Accessibility rules require at least 4.5 to 1 for body text, and 3 to 1 for a large heading (W3C, WCAG 2.2): measure it at the brightest spot.
• Reduced motion. When the visitor asks their device for less animation (prefers-reduced-motion), the library removes grain and frost. The leak stays: it is still, and nothing in it involves motion.
• No flashing. A page must not flash more than three times per second, or it may trigger seizures in photosensitive people (W3C, criterion 2.3.1). The leak never flashes, and doesn’t flicker like a flame.

How it is made

Two radial gradients, radial-gradient(), centered on the top right corner of a layer laid over the page. The color of the first is computed by color-mix(): 60% of the site’s accent color, 40% of a pale orange. The second is a warm white. The whole goes through screen blending, and the opacity multiplies the layer’s setting by the “veil” that holds it back on the first screen:

.m.m--fuite {
  mix-blend-mode: screen;
  opacity: calc(var(--fuite, .28) * var(--m-voile, 1));
  background:
    radial-gradient(80% 60% at 100% 0%,
      color-mix(in srgb, var(--accent) 60%, #ffd9a0) 0%, transparent 62%),
    radial-gradient(50% 40% at 92% 12%, #fff2d8 0%, transparent 70%);
}

Because the hue comes from --accent, changing the site’s accent color changes the color of the leak: it always belongs to the palette.

In the studio

The light leak is one of the library’s ten textures. You choose it at the “The texture” step, after the background, alone or with a second texture.