How to Add an Authentic VHS Effect to Video in the Browser

Veronica Lin — Fri, 07 Aug 2026 14:17:51 +0000

If you've wanted that worn VHS look on a video without opening After Effects, here's what actually creates the effect and how to do it in the browser.

What makes footage look "VHS"

Four things do most of the work:

Tracking lines — horizontal distortion bands that drift vertically.
Chroma shift — the red/blue channels offset from green, visible at edges.
Grain and noise — analog signal hiss, brighter in dark areas.
Date stamp — that blocky timestamp in the corner.

Strip any of these and it stops reading as VHS. Add all four and even a clean clip looks dubbed.

Browser approaches

Canvas 2D — read each frame's pixels, shift the R and B channels a few pixels apart for chroma shift, overlay a noise pattern, and draw moving horizontal bands. Cheap and good enough for short clips.

CSS filters — for static polish, filter: contrast() saturate() hue-rotate() plus an animated noise overlay gets you 70% of the look with almost no code. No per-pixel work.

WebGL shaders — the convincing route. A fragment shader can do time-based distortion, real chroma aberration, and scanlines at 60fps. More setup, best result.

The shortcut

If you just want the result and not the implementation, run the clip through this free online VHS video filter — it applies the full effect (tracking, chroma shift, grain, date stamp) in the browser, no install, no upload to a server. Handy when you need one clip done fast.

Closing

The interesting thing about the VHS aesthetic is that it's entirely reproducible from four well-understood artifacts. Once you know which visual cue does what, you can implement it at whatever fidelity your stack allows — from a 10-line CSS version up to a full shader.

DEV Community: Veronica Lin

How to Add an Authentic VHS Effect to Video in the Browser

What makes footage look "VHS"

Browser approaches

The shortcut

Closing