Cory's profile picture

Published by


Category: Web, HTML, Tech

🖥 CSS Snippet: Add Film Grain To Your Profile

This piece of CSS will put a film grain effect over your entire page. It works on desktop and mobile and will sit over everything without interfering with anything. Great if you have an aesthetic that could use some subtle motion. 

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(;
  content: "";
  height: 300%;
  left: -50%;
  position: fixed;
  top: -110%;
  width: 300%;
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }

Remember: always put any CSS in between two Style tags: <style></style> That way, browsers will recognize that what you're trying to do is adjust the style. Also remember that CSS stands for Cascading Style Sheets, so the browser will activate styles from top to bottom!

44 Kudos


Displaying 15 of 15 comments ( View all | Add Comment )


MacinTally's profile picture

for some reason it works on aka the hey space preview thingy but not on the actual site?

Report Comment


⟡Ziggy's profile picture


Report Comment


☆ ROYCE / SCOUT !!'s profile picture

yo tysmm

Report Comment

⛧Morganna Bramah

⛧Morganna Bramah's profile picture

🌫I've replaced mine with a seamlessly tiled huge fog PNG, and not sure on how to stabilize the up down/motion, to make it roll more gently from side to side... ...What portion of the code do I need to play with? 💖

Report Comment


UsefulLeaf's profile picture

This is awesome!! Do you have any tips for other effects like this one?

Report Comment

Ask for Donna

Ask for Donna's profile picture


Report Comment

Becki Bullets

Becki Bullets's profile picture

Omg! This is going perfect with my new profile layout! Thankyou

Report Comment


Sarah's profile picture

Thank you so much!

Report Comment

Rainstorm Moonbow

Rainstorm Moonbow's profile picture

Thanks, I can use this!

Report Comment


aleeex's profile picture

this is so so rad!

Report Comment


Chriiiis's profile picture

This is really neat! I learn a lot from you all CSS magicians on here!

Report Comment

monotony ♡◔ᴗ◔♡

monotony ♡◔ᴗ◔♡'s profile picture

Thanks for sharing, I'll probably end up using my own image, tweak opacity, and a few other fine tunes. I'll hit you up when I get it done at some point this week but I bookmarked it for now! 💕

Report Comment

yeah dude! all code is building blocks to making your shit happen.

the basics of this is, an image with enough contract to make the grain pop out at the .2 opacity, and the random movements that basically cover the whole screen. an image too small will have obvious patterns, but if that's what you're going for, then yeah

by Cory ; ; Report

Good to know, glad you're okay with me making my modifications 🙏

by monotony ♡◔ᴗ◔♡; ; Report

ash lynx

ash lynx's profile picture

this fits my profile perfectly! i love it!

Report Comment


XxNix_NightmarexX's profile picture

stole this XD its rly subtle, nice !

Report Comment

is it really stealing if you can just _have it_ lmao

I'm glad you like it! tell your friends :D

by Cory ; ; Report

VJ Daffolk

VJ Daffolk's profile picture

Thank you!

Report Comment

I removed the line that started with

because I didn't like how it looked cross-browser. It should now be a little bit more obvious, especially in Chrome or on lighter backgrounds.

by Cory ; ; Report