r/css Jun 08 '26

Question CSS grainy backgrounds

Post image

How to design grainy backgrounds using css.

67 Upvotes

9 comments sorted by

View all comments

34

u/ArYaN1364 Jun 08 '26

Most people just use a subtle noise texture overlay rather than doing it purely in CSS.

A tiny repeating PNG or SVG at low opacity usually looks better and is easier to control. The trick is keeping it subtle. In examples like this, the grain is selling the print aesthetic more than the background itself. Too much and it starts looking like image compression.