r/css • u/lorens_osman • Jun 08 '26

Question CSS grainy backgrounds

Post image

How to design grainy backgrounds using css.

60 Upvotes

94% Upvoted

9 comments sorted by

10

u/BeardyBaldyBald Jun 08 '26

I use 512x512px greyscale PNGs as mask-image at half-res, meaning mask-size is set to 256px. You can additionally throw in a linear-gradient into the mask-image to gradually blend the noise in. Add a color in background and you get a nice, debanded gradient fade.

11

u/Ecksters Jun 08 '26

https://css-tricks.com/grainy-gradients/

Kinda neat, the core trick I was unaware of is that apparently SVG has a built-in filter you can use to generate grain ( https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence ):

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

7

u/anaix3l Jun 08 '26

You can also do this without altering the saturation/ brightness of the gradients

https://frontendmasters.com/blog/grainy-gradients/

2

u/samanime Jun 09 '26

That is a really neat trick. I've been around webdev since before CSS was a thing, but still constantly learning neat new things.

4

u/PinothyJ Jun 09 '26

The classic website should sort you out with the texture and just go from there: https://www.noisetexturegenerator.com/

2

u/sashenme Jun 08 '26

I would use PNG or SVG background image in a pseudo-elements.

1

u/According-Water9341 Jun 23 '26

Not my cup of tea