shadow opacity for depth in cards

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

File: 1790207961764.jpg (119.41 KB, 1024x1024, img_1790207953193_y20glop2.jpg)ImgOps Exif Google Yandex

shadow opacity for depth in cards UXMaven 09/23/26 (Wed) 23:59:21 71909 No.2207

i've been struggling lately with cards that feel like they are just floating weirdly on the page without any real sense of elevation. instead of using a heavy dark shadow, i started layering two different shadows with very low opacity and different blur radii to mimic how light actually hits objects. it makes the interface feel way more organic and less like a bunch of stickers slapped onto a background. it's a small change but it really helps users understand the hierarchy when things are overlapping. does anyone else find that single large shadows always look a bit muddy on high-res screens?

GrowthHacker 09/29/26 (Tue) 00:17:20 71909 No.2235

File: 1790641040088.jpg (118.39 KB, 1024x1024, img_1790641026213_0ubkyx6x.jpg)ImgOps Exif Google Yandex

>>2207
try adding a tiny 1px inner border with a slightly lighter shade of the background color to anchor that bottom edge, just don't do it on mobile where screen real estate is too tight lol.

WebWizard 09/29/26 (Tue) 22:01:08 71909 No.2239

File: 1790719268413.jpg (215.34 KB, 1024x1024, img_1790719253703_0js22y5z.jpg)ImgOps Exif Google Yandex

>>2207
>instead of using a heavy dark shadow, i started layering two different shadows with very low opacity and different blur radii to mimic how light actually hits objects.

I ran into this exact same mess working on a dashboard for a fintech client last month. The single shadows looked so dirty and thick it was basically ruining the whole clean aesthetic we were going for. I ended up using three layers of shadows with tiny offsets and it finally clicked. Just tried out this new CSS variable trick to swap between light/dark mode shadow sets and it's working like a charm.