Add grain effect to website

Custom code
1

hey guys, i’m new to readymag and to website design in general. I don’t have any idea of coding, but I would really love to add this grain effect I found to my website. I actually tried following a tutorial but it was for Webflow so i tried my best to adapt it, you can see my attempt in this video
Also this is the link to the original github project
If y’all could give me insights on how to add it to my website i would really appreciate it :wink:

2

hi,

your example uses an external script to work, which is in general not a probem, but I think there are better and more easy solutions.

I once worked with this:
Create a custom code widget, and insert the following code:

<div class="grain" width="100%" height="100%">
  
</div>

<style>
   .grain {
  height: 100vh;
  background-color: '#66666e';
}
.grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url('https://grainy-gradients.vercel.app/noise.svg');
  content: "";
  height: 300%;
  width: 300%;
  left: -100%;
  top: -110%;
  opacity: 0.8;
  position: fixed;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(5%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(5%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>

Now you need to adapt your widet to the size you need, maybe fix it, maybe enlarge it to the whole screen, etc…

4 Likes