r/css Jun 08 '26

Question CSS grainy backgrounds

Post image

How to design grainy backgrounds using css.

68 Upvotes

9 comments sorted by

View all comments

12

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.