← Back to gallery
CSS

Film Overlay Compositing

A scoped procedural grain overlay that composites texture inside the background wrapper while preserving foreground text and control contrast.

Duration
7s
Resolution
1440×900
Format
CSS
film-grainnoise-overlaymix-blend-modetexturecontrast

Texture / Procedural Grain Overlay

Film Overlay Compositing

A low-opacity procedural grain layer is composited within the background wrapper so foreground UI contrast remains intact.

soft overlay film overlay - 6.5s cycle · 1.00 intensity
SoftOverlay scoped to background

Subtle blend

Soft Overlay

A soft-light grain layer adds texture without contaminating text and controls.

The grain is procedural CSS, not an external GIF or image asset.

  • film-grain
  • mix-blend-mode
  • overlay
NoirOverlay scoped to background

Monochrome texture

Noir Surface

A monochrome grain layer uses lower opacity to keep edges crisp.

The overlay moves slowly and never animates foreground opacity.

  • noise-grain
  • low opacity
  • contrast
ColorOverlay scoped to background

Soft color blend

Color Wash

A tinted overlay demonstrates how little opacity is needed for color texture.

The blend layer is clipped to the preview surface.

  • soft-light
  • blend scope
  • texture

Film overlay inspector

Soft Overlay

SoftOverlay scoped to background
Motion contract
The grain is procedural CSS, not an external GIF or image asset.
Accessibility
Reduced motion stops grain drift and leaves a static low-opacity texture.

Scope the blend to the background wrapper so the UI is not affected.

css
.film-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(0.08 * 1.00);
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 30%, white 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, white 0 1px, transparent 1px);
  animation: grainDrift 6.50s steps(4, end) infinite;
}

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