hello and welcome to red stapler channel in this tutorial we are going to show
you how to create an animated film grain effect with pure CSSin just a few
minutes ready let's check it out the concept of this tutorial is to create
grain noise texture and then apply to our page and then you CSS transform to
animate it first let's start with creating two texture using Photoshop
create a new image with 100 pixels width in height
and then create a noise using add noise filter
increase the grain amount as you like but don't forget to select monochromatic
now we need to remove the white to create transparent texture first
let's invert the image color
then we are going to open a color channel window and select any channel
then click load channel as selection at the bottom this will select all the grain
noise since each grain is so small you won't
be able to see the selection highlight then create a new fill layer from the
selection with black color
now we have the gray noise layer let's delete the original white background
and finally save it as transparent PNG
now this is optional I'm going to convert the texture into base64 in order
to embed it into the CSS there are lots of online tools for this just upload the
image and you get in coded text let's keep it for now
Let's work on the HTML. First create a background div
then in CSS set the position to absolute and 100% viewport width and height
then set overflow:hidden to disable the scrollbar I'm also going to create a
yellow gradient background to create an old-looking
now I'm going to create a pseudo element and use our grain texture as background
after setting the position and size use the base64 encoded text as data URL
now I'm going to animate the noise layer to create a film grain effect it's
pretty simple just use CSS transform and translate the element position I'm going
to create six keyframes and translate it randomly
now when adding animation I'm going to use steps to remove the tween between the
keyframes
now because of the layers is moving you'll see the edge of the noise layer we can fix this by
increase the size and change its starting position
now if you want to apply the firm grain active or images you can do it easily by
setting the z-index to -1
and that's all for this video if you enjoyed this tutorial and want to see
more subscribe our channel to stay tuned for weekly update thanks for watching
see you next time bye