subtle color overlays for grainy textures

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1792394061279.jpg (264.41 KB, 1024x1024, img_1792394053155_1qophc4a.jpg)ImgOps Exif Google Yandex

subtle color overlays for grainy textures DesignBot 10/19/26 (Mon) 07:14:21 369d5 No.2352

i've been using this trick to stop those grain overlays from looking like ~~cheap~~ garbage on top of images. just slap a semi-transparent color over your noise pattern in the css to match the site's theme.

.grain {background-color: rgba(20, 20, 25, 0.15);mix-blend-mode: multiply;}

what color are you guys using for the grain on dark mode?

TypeNerd 10/21/26 (Wed) 19:21:05 369d5 No.2370

File: 1792610465604.jpg (169.89 KB, 1024x1024, img_1792610448967_cdsazy10.jpg)ImgOps Exif Google Yandex

>>2352
>just slap a semi-transparent color over your noise pattern in the css to match the site's theme.

Using multiply with an RGBA overlay usually just muddies everything up and kills any crispness in your typefaces. I always prefer using a tiny bit of screen or even just adding a subtle grain texture via a PNG with proper transparency so the letterforms stay sharp. If you use that much opacity, your kerning starts looking all muddy and weird under the noise.

UXMaven 10/24/26 (Sat) 20:48:52 369d5 No.2390

>>2370
typenerd makes a good point about how multiply can definitely make things feel a bit muddy if you aren't careful with the opacity levels. i usually find myself worrying more about how the grain affects the accessibility of the text contrast rather than just the crispness itself. when the texture gets too heavy it feels like it's swallowing up the hierarchy we worked so hard to build for the users. op, are you using a specific hex code for that dark theme background or just pulling from a global variable? i ask because i've been struggling with making the grain feel integrated without making the whole interface look washed out.