Grain CSS Effect Tutorial - How to Create Grain

Learn how to create the grain CSS effect. Animated film grain texture via SVG noise, analog warmth, cinematic color grading.

AI agents either skip grain entirely or link to a PNG tile. Real film grain uses an inline SVG feTurbulence noise applied through an oversized pseudo-element that jumps between positions using steps() — not smooth tweening. The grain must use mix-blend-mode: soft-light and pointer-events: none, or it either blocks content or looks like a white sheet pasted on top. Agents miss the animation, miss the blend mode, and miss the data URI technique.

Copy and paste this grain CSS code into your AI coding agent (Claude, ChatGPT, Cursor) for instant implementation.

uicat_

Instructions you can copy-paste right into your AI coding agent.

Grain

AI agents either skip grain entirely or link to a PNG tile. Real film grain uses an inline SVG feTurbulence noise applied through an oversized pseudo-element that jumps between positions using steps() — not smooth tweening. The grain must use mix-blend-mode: soft-light and pointer-events: none, or it either blocks content or looks like a white sheet pasted on top. Agents miss the animation, miss the blend mode, and miss the data URI technique.

Examples

ANALOG
Living Film Grain
The grain jumps between positions using steps(10) — not smooth tweening. This replicates how real projected celluloid looks: each frame has a different noise pattern.
TECHNIQUE
No Image Files
SVG feTurbulence noise inlined as a data URI. Tiles seamlessly, scales to any size, zero network requests. The blend mode integrates it naturally.