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.
Top comments (0)