🖥 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(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@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

Comments

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

MacinTally	1707705454 for some reason it works on https://nein-mc.neocities.org/csstest/ aka the hey space preview thingy but not on the actual site? Report Comment
⟡Ziggy	1707512908 Thanksss Report Comment
☆ ROYCE / SCOUT !!	1683754515 yo tysmm Report Comment
⛧Morganna Bramah	1649188054 🌫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	1642231665 This is awesome!! Do you have any tips for other effects like this one? Report Comment
Ask for Donna	1641024722 sweet! Report Comment
Becki Bullets	1612009660 Omg! This is going perfect with my new profile layout! Thankyou Report Comment
Sarah	1611555887 Thank you so much! Report Comment
Rainstorm Moonbow	1611499491 Thanks, I can use this! Report Comment
aleeex	1611078540 this is so so rad! Report Comment
Chriiiis	1611075127 This is really neat! I learn a lot from you all CSS magicians on here! Report Comment
monotony ♡◔ᴗ◔♡	1611074912 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 ; 1611075038; Report Good to know, glad you're okay with me making my modifications 🙏 by monotony ♡◔ᴗ◔♡; 1611075124; Report
ash lynx	1611074863 this fits my profile perfectly! i love it! Report Comment
XxNix_NightmarexX	1611074845 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 ; 1611075125; Report
VJ Daffolk	1611072384 Excellent!!! Thank you! Report Comment I removed the line that started with mix-blend-mode 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 ; 1611074252; Report