🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Noise Background

Noise background effect in CSS.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us