Noise background effect in CSS.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
The Noise Background component is used to add a noise background effect to a section.
The noise effect is created using the
feTurbulence SVG filter. The ID of the SVG filter is then used in CSS to create the effect.
The background with the noise effect is in position absolute. Make sure to use it within a container in position relative. Also, make sure all its siblings have a higher z-index, to prevent the noise effect from covering your content.