Background Noise Grid
Vertical strips with gradient fills and a noise texture overlay create a subtle layered background. Dynamically calculates strip count based on viewport width.
Instant copywriting with our
state of the art tool.
On mount, the component calculates how many 80px-wide strips fit the current viewport width. A resize listener recalculates this value when the window changes. Each strip renders with a horizontal gradient and a shadow line on its right edge.
A noise texture layer sits on top of the strips, scaled to 120% to prevent visible tiling edges. The noise uses a radial mask to fade out toward the edges. You'll need to download the noise.webp file and place it in your public folder.
Works well for copywriting tool landing pages, AI product sites, creative agency homepages, and any design that benefits from a tactile, textured feel.
More from Backgrounds
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
On mount, the component calculates how many 80px-wide strips fit the current viewport width. A resize listener recalculates this value when the window changes. Each strip renders with a horizontal gradient and a shadow line on its right edge.
A noise texture layer sits on top of the strips, scaled to 120% to prevent visible tiling edges. The noise uses a radial mask to fade out toward the edges. You'll need to download the noise.webp file and place it in your public folder.
Works well for copywriting tool landing pages, AI product sites, creative agency homepages, and any design that benefits from a tactile, textured feel.