Why does my film overlay tint the UI text?

The blend mode or filter is probably applied to the same wrapper as the foreground content. Put the scene and texture in a scoped background layer, then render labels and controls above it.

How do I make film grain feel less like a sliding pattern?

Move the texture in tiny jumps with steps() rather than a smooth timing function. Real grain changes frame to frame; a smooth pan looks like wallpaper drifting across the card.

Is mix-blend-mode safe for production overlays?

Modern browsers support it, but results depend on stacking contexts and background colors. Use isolation: isolate and provide a readable base scene if blend mode is unavailable.

Can film overlays hurt performance?

Yes. Large blended textures, filters, and animated background layers can add paint cost. Keep overlays small, avoid full-page animated grain, and pause decorative motion offscreen.

What should reduced motion do for film grain?

Stop flicker, hue cycling, or vignette pulsing while preserving a representative static texture. Reduced motion should remove movement, not strip the whole visual treatment.

← Back to gallery

Film Overlay Compositing

Cinematic film-grain overlay that composites tint + grain + vignette over a base photo via mix-blend-mode + filter chains. Three film stocks: warm Kodachrome, cool tungsten balance, and a high-contrast B&W silver-halide stock.

film-overlaymix-blend-modegrainvignettecolor-tintcompositingprefers-reduced-motion

Fractal noise · authentic film grain

Soft Grain Drift

A procedural fractal-noise grain layer rides on top of a warm cinematic scene with mix-blend-mode: overlay. The grain layer translates in tiny steps (every 0.45s) so the texture reads like authentic film grain instead of a smooth slide. The scene, vignette and REC chip beneath stay pin-sharp.

Radial vignette · soft pulse

Vignette Breathe

The corner vignette breathes — its dark edge gently pulses between two strengths on a slow ease-in-out cycle, suggesting a single bulb dimming and brightening. The grain stays static; only the vignette layer animates.

Hue rotate · warm ↔ cool drift

Mood Cycle

The whole scene is wrapped in a slow filter: hue-rotate cycle so the colour temperature drifts warm → cool → warm. A subtle constant grain stays on top to hold the cinematic texture while the underlying mood shifts every cycle. Foreground chips are scoped outside the filter so their colour stays correct.

Cycle duration0.45s

Effect strength0.85

Helped you ship something? 🐟 Send my cat a churu

/* A fractal-noise grain layer translates in tiny discrete steps so the texture reads as authentic film grain on top of a static scene. */
.film-grain {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  mix-blend-mode: overlay;
  opacity: 0.85;
  animation: filmGrainShift 0.45s steps(4, end) infinite;
  pointer-events: none;
}

@keyframes filmGrainShift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2%, 1%); }
  50%      { transform: translate(1%, -2%); }
  75%      { transform: translate(2%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
}

How to make this

A film overlay composite scopes grain, vignette, and blend modes to the background wrapper so foreground text keeps stable contrast.

1<figure class="film-overlay-card">2  <div class="film-overlay-card__scene" aria-hidden="true"></div>3  <figcaption>REC 04</figcaption>4</figure>5 6<style>7.film-overlay-card {8  position: relative;9  isolation: isolate;10  overflow: hidden;11  display: grid;12  place-items: end start;13  width: min(100%, 28rem);14  aspect-ratio: 16 / 9;15  margin: 0;16  border-radius: 18px;17  background: #0a0418;18}19.film-overlay-card__scene {20  position: absolute;21  inset: 0;22  z-index: -1;23  background:24    radial-gradient(ellipse at 22% 30%, rgba(244,114,182,.55), transparent 55%),25    radial-gradient(ellipse at 78% 70%, rgba(251,191,36,.45), transparent 58%),26    linear-gradient(135deg, #1a0820, #0a0418 60%, #1a1206);27}28.film-overlay-card__scene::before {29  content: "";30  position: absolute;31  inset: -4%;32  opacity: .42;33  mix-blend-mode: overlay;34  pointer-events: none;35  background-image:36    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1px);37  background-size: 5px 5px;38  animation: film-overlay-recipe-grain .45s steps(4, end) infinite;39}40.film-overlay-card::after {41  content: "";42  position: absolute;43  inset: 0;44  pointer-events: none;45  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.62));46}47.film-overlay-card figcaption {48  position: relative;49  z-index: 1;50  margin: 1rem;51  padding: .45rem .7rem;52  border-radius: 999px;53  color: #fef9c3;54  background: rgba(15, 23, 42, .82);55  font: 800 .78rem/1 ui-sans-serif, system-ui;56  letter-spacing: .14em;57}58@keyframes film-overlay-recipe-grain {59  0%, 100% { transform: translate(0, 0); }60  25% { transform: translate(-2%, 1%); }61  50% { transform: translate(1%, -2%); }62  75% { transform: translate(2%, 1%); }63}64@media (prefers-reduced-motion: reduce) {65  .film-overlay-card__scene::before { animation: none; }66}67</style>

Annotated snippet

Line 1The figure owns both the decorative scene and the real caption. Any meaning should remain in text, not only in the texture or color grade.
Line 8isolation: isolate creates a local compositing context. That keeps blend modes from leaking into neighboring page backgrounds.
PitfallIs mix-blend-mode safe for production overlays?
Modern browsers support it, but results depend on stacking contexts and background colors. Use isolation: isolate and provide a readable base scene if blend mode is unavailable.
Line 19The scene layer is separate from the caption. This lets the overlay affect only the background image while foreground UI remains crisp.
Both cards run the same hue-rotate animation. On the before card the filter is on the whole wrapper, so the REC chip swims through the colour cycle along with the scene. On the after card the filter is on a scoped background layer only — the chip text stays a stable cream colour.
PitfallWhy does my film overlay tint the UI text?
The blend mode or filter is probably applied to the same wrapper as the foreground content. Put the scene and texture in a scoped background layer, then render labels and controls above it.
Line 34The grain sits on a pseudo-element with pointer-events disabled. It should never block hover, focus, or clicks on foreground controls.
PitfallCan film overlays hurt performance?
Yes. Large blended textures, filters, and animated background layers can add paint cost. Keep overlays small, avoid full-page animated grain, and pause decorative motion offscreen.
Line 33mix-blend-mode: overlay composites the dots into the scene luminance. Keep it on decorative layers; blending text makes contrast unpredictable.
PitfallIs mix-blend-mode safe for production overlays?
Modern browsers support it, but results depend on stacking contexts and background colors. Use isolation: isolate and provide a readable base scene if blend mode is unavailable.
Line 38steps() creates discrete grain jumps. Smoothly translating grain reads like a sliding texture, not film noise.
Same translate keyframe on the dot texture. With ease-in-out timing the pattern smoothly pans across the card and reads as sliding wallpaper. steps(4, end) snaps the texture between four discrete positions per cycle — that frame-to-frame discontinuity is what makes the eye accept it as film grain.
PitfallHow do I make film grain feel less like a sliding pattern?
Move the texture in tiny jumps with steps() rather than a smooth timing function. Real grain changes frame to frame; a smooth pan looks like wallpaper drifting across the card.
Line 65Reduced motion freezes the grain but leaves the static texture and vignette. The cinematic surface remains without constant flicker.
PitfallWhat should reduced motion do for film grain?
Stop flicker, hue cycling, or vignette pulsing while preserving a representative static texture. Reduced motion should remove movement, not strip the whole visual treatment.

Notes

Overview

Cinematic film overlays composite tint, grain, and vignette layers over a base photo via mix-blend-mode + filter chains. Three film stocks ship: warm Kodachrome, cool tungsten balance, high-contrast B&W silver-halide.

When to use it

Reach for film overlays on photography portfolios, editorial hero images, and product surfaces where a curated look elevates the brand. Skip overlays on content where color fidelity matters (e-commerce product photos, medical imagery, color-critical previews). Keep grain texture small (32px tile) to avoid moiré on Retina displays.

How it works

The base photo sits at the bottom of the stack. Above it: a tint layer (solid color with reduced opacity) with mix-blend-mode: multiply or soft-light shifts the overall color temperature. A grain layer (small repeating noise PNG) sits above with mix-blend-mode: overlay + opacity: 0.15. A vignette layer uses a radial gradient from transparent center to opaque edges with mix-blend-mode: multiply. Animate the tint opacity or the grain layer’s background-position for slow film texture drift; static stacks work fine without animation.

Production gotchas

mix-blend-mode requires an isolation context — without an opaque ancestor with isolation: isolate, blends can leak through to elements behind the stack. The grain layer must repeat cleanly; if the noise tile has visible seam boundaries the overlay reads as wallpaper, not film grain. Color-management edge cases: Safari iOS clamps wide-gamut blends differently than Chromium, so the same film stock looks slightly different across browsers. Test on actual devices, not just emulators.

Accessibility

Film tints can drop overlaid text contrast unexpectedly — if any text sits on top of the composited photo, verify contrast in the worst-case film stock and not just the unfiltered base. Under prefers-reduced-motion: reduce drop any grain-drift animation and pin the layers static. Decorative photos should carry an empty alt="" or be marked role="presentation".

References

Implementation depth

Film overlays are a blend stack: base image, tint, grain, and vignette each own one visual job. mix-blend-mode can create the look, but isolation keeps the blend from leaking into the rest of the page.

Do not use this where color fidelity is part of the task. Product photos, charts, and status colors should not sit under film tint. If grain moves, reduced motion should pin it to a static texture.

Film Overlay Compositing