# Add grain effect to website

**URL:** <https://forum.readymag.com/t/add-grain-effect-to-website/3906>\
**Category:** Custom code\
**Created:** [November 15, 2024, 1:49pm UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906 "2024-11-15T13:49:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vinicio](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/vinicio/32/2627_2.png) [@Vinicio](https://forum.readymag.com/u/Vinicio)\
**Post date:** [November 15, 2024, 1:49pm UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/1 "2024-11-15T13:49:48Z")

</div>

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](https://www.webbae.net/posts/animated-grain-texture) 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](https://youtu.be/Un-lEpwXF8M)  
Also this is the [link to the original github project](https://github.com/sarathsaleem/grained)  
If y’all could give me insights on how to add it to my website i would really appreciate it 😉

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 19, 2024, 10:10am UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/2 "2024-11-19T10:10:19Z")

</div>

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:

```auto
<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…

---

<div class="post-metadata">

**Author:** ![Genesis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/genesis/32/2671_2.png) [@Genesis](https://forum.readymag.com/u/Genesis)\
**Post date:** [November 24, 2024, 7:55pm UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/3 "2024-11-24T19:55:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 25, 2024, 9:08am UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/4 "2024-11-25T09:08:02Z")

</div>

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:

```auto

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

```

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

---

<div class="post-metadata">

**Author:** ![andrewtackson](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@andrewtackson](https://forum.readymag.com/u/andrewtackson)\
**Post date:** [February 10, 2025, 4:36pm UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/5 "2025-02-10T16:36:28Z")

</div>

Thank you so much for sharing the code with us. It definitely help us all in the long run.

---

<div class="post-metadata">

**Author:** ![andrewtackson](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@andrewtackson](https://forum.readymag.com/u/andrewtackson)\
**Post date:** [February 14, 2025, 4:02pm UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/6 "2025-02-14T16:02:26Z")

</div>

> [@neueMeta](#):
>
> 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: [t-ranks](https://t-ranks.com/)  
> Create a custom code widget, and insert the following code:
> 
> ```auto
> <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…

Applie this code today, it is giving a unique look which no other competitor is applying. Thanks for the code!

---

<div class="post-metadata">

**Author:** ![andrewtackson](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@andrewtackson](https://forum.readymag.com/u/andrewtackson)\
**Post date:** [February 22, 2025, 11:45am UTC](https://forum.readymag.com/t/add-grain-effect-to-website/3906/7 "2025-02-22T11:45:40Z")

</div>

Thanks a bunch guys for the code. Site is looking awesome!