You first need to add a svg filter definition to your HTML file such that the CSS can reference it later to put the grain on top of the background image. The filter uses feTurbulence
to create a fractal noise pattern, and feColorMatrix
to adjust the opacity. You can experiment with values like baseFrequency
in feTurbulence
or the alpha channel (the 0.8
in the feColorMatrix
) to finetune the grain's intensity and texture.
<!-- SVG noise filter definition - this goes in your HTML -->
<svg style="display: none">
<filter id="noiseFilter">
<!-- Creates the fractal noise pattern -->
<feTurbulence
type="fractalNoise"
baseFrequency="0.5"