HTML + CSSBackgrounds
Film grain gradient
Animated film grain over a dark gradient with a drifting light, for an analog, cinematic texture.
Settings
1x
1x
1
Code
<div class="pt-grain"><b></b><i></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Grain takes the digital edge off a gradient and makes it feel shot on film. It suits the portfolio of a photographer or filmmaker, the homepage of a creative studio or an album release page. The noise flickers like real film while a patch of light moves slowly. It’s a CSS film grain background, noise included.
The grain is kept faint on purpose. If you raise the opacity, check it on a phone too, because noise looks stronger on small bright screens. It pairs well with big serif headlines and generous white space.