Hacker News Reader

Comment by fouronnes3 | Hacker News Reader

I agree! Any tips on how to implement it?

It appears his full CSS is as follows:

  background-image: url(/css/noise.png);
  background-repeat: repeat;
  background-size: 182px;
  filter: brightness(6);
  opacity: 0.018;

In my experimentation with it, I can't quite figure out how he applies the effect to the whole page without it either dissapearing on adjustments to the viewport or affecting the pages text opacity.

To make it fill the page, you need to make sure it's placed inside an element (with relative positioning) that's height comes from its content. Then give the noise absolute positioning.

The noise still overlays the text, it's just not really visible because of the contrast between text and background.

What about a background (pattern) that has the noise already in it? I use https://bg.siteorigin.com/ often to create subtle backgrounds like the one on https://www.winkeljustitia.nl/

I was thinking maybe there's a pure CSS way to do it? That seems to be inline with the style of the author's blog.

Pure CSS would be nice indeed.

I saved myself time by reusing a small noise image I'd used before, but you could do it with an SVG pretty easily!

https://grainy-gradients.vercel.app/

Reply on news.ycombinator.com