The halation effect: film glow on a website

On a film photo, bright lights spill over. A lamp, a window, the reflection on a glass surround themselves with a warm halo, orange-red on color film: that is halation. On a site, the layer of the same name lays this halo over the page, in the accent color, so the light belongs to the palette. The image seems to come from film rather than a sensor.

Without

Halation

Where the effect comes from

A film is made of sensitive layers laid on a transparent base. A very strong light passes through these layers, reflects off the base or the camera’s pressure plate, and comes back to expose the red-sensitive layer, around the source. The manufacturer CineStill describes in these terms the glow seen in overexposed highlights.

For nearly a century, Kodak protected its color motion picture films with a black layer on the back of the base, the rem-jet, which stopped halation, sparks of static electricity and scratches. In 2025, the manufacturer announced its replacement, on its VISION3 negatives, by an anti-halation undercoat placed beneath the emulsion and removed during processing. According to its comparative tests, it controls halation even better than the old layer.

Yet the effect has found its fans. CineStill makes color films without an anti-halation layer, and the red glow of its highlights has become its signature; the manufacturer notes that many photographers have adopted it. What the industry treated as a flaw, websites take up as a texture.

When to use it

Halation suits pages that live on evening light and visible sources:

• a restaurant dining room or a bar, its pendant lights, its candles, its glasses;
• a hair or beauty salon, its lit mirrors;
• a creative or CGI studio, for whom light is the subject;
• a label, a concert venue, with its spotlights;
• a product launch, staged like a film poster.

Five of the studio’s layouts apply it by default. The Table layout, the Salon layout and the Product brand layout carry it alone. The 3D studio layout pairs it with scan lines, and the Label layout with dust.

When to skip it. On a cold video, blue or gray, a warm halo clashes. A page that must inspire rigor, an accounting firm or an engineering office, does without light that bleeds. And on a very light palette, the layer has no headroom: it can only lighten, and a white background already is.

The right dose

In the library, the layer is set at 35% opacity. It is made of two halos in the site’s accent color: the first, denser, a little above and to the right of center; the second, fainter, at the bottom left. Both fade out well before the edges.

These two halos keep their place, whatever the lights in your film. The layer works best when the video is lit from roughly these spots, or when its light is diffuse enough for position to matter little. On a film lit by a single lamp, placed elsewhere, look at the result before keeping it.

Like the other textures, halation leaves the first screen bare and rises as you scroll down. And the rule holds: two layers at most. Halation goes well with a texture, scan lines or dust, which works the surface while it works the light; at three layers, the image gets dirty.

What it costs

Little. Two gradients, drawn once by the browser, with no file to download, set in a fixed position. The library’s stylesheet counts halation among the light layers: only one, frost, really costs anything.

It doesn’t animate. The only thing that varies is its opacity during the first scroll, and opacity is one of the two properties a browser can change without repainting the screen (web.dev). Movement comes from the film beneath, never from the texture above.

Accessibility

• Contrast. The layer lightens everything it covers, text included. On a dark page, it slightly raises the background behind light text, and so reduces the gap between the two. Check the contrast where the halo is densest, above and to the right of center: at least 4.5 to 1 for body text (WCAG 2.2, criterion 1.4.3).
• Reduced motion. Grain and frost disappear when the visitor asks for less animation (prefers-reduced-motion). Halation stays: it is still.
• No flashing. The halo doesn’t pulse and doesn’t follow the mouse. Nothing in this layer lights up or goes out.

How it is made

Two radial gradients, radial-gradient(), in the accent color mixed with transparency, and a blend mode, mix-blend-mode: screen. In screen mode, the browser inverts the two colors, multiplies them and inverts the result (MDN): the layer can only lighten. That is how light adds to light, and why the halo shows mostly on dark areas.

.m.m--halation {
  mix-blend-mode: screen;
  opacity: calc(var(--halation, .35) * var(--m-voile, 1));
  background:
    radial-gradient(58% 44% at 68% 38%,
      color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%),
    radial-gradient(70% 60% at 22% 72%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

The halo takes the site’s accent color, that of its buttons. An orange-red halation, as on film, therefore requires a warm accent; with a green or blue accent, it becomes a neon glow. For a warm flow entering through a corner, the library has another texture, the light leak.

In the studio

Halation is one of the library’s ten textures. You choose it at the “The texture” step, after the background.