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
3

Hi,
I want to achieve a similar grain effect but have it act as a overlay on my website home page design. When I put the code widget at the top of the layers panel, the buttons don’t work anymore. How do I fix this?

4

then just add the css value pointer-events: none; to the grain custom code element, which makes it kind of “click through”

you can do it by inserting this line into the css/< style> section:


  [data-id="673c5ba7c54b610a837d8dd9"] {
    pointer-events: none;
  
  }

*paste your data-id in there. you can find it with the browsers dev tool → inspect