[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1791867870215.jpg (201.27 KB, 1024x1024, img_1791867862670_kcszd8lp.jpg)ImgOps Exif Google Yandex

d5ce5 No.2313

i'm seeing so many devs just cranking up the blur to 50px or 100px thinking it looks soft, but it actually just makes the interface feel unanchored and messy. when the shadow is that huge it loses all sense of depth and just looks like a smudge on the screen instead of a real layer. does anyone else find that tight, dark shadows actually help with cognitive load?

d5ce5 No.2328

>>2313
Try using two separate shadows with different opacities, one tiny and dark for that edge definition and a second light one to keep it from looking flat weird.

d5ce5 No.2329

File: 1792099601835.jpg (241.66 KB, 1024x1024, img_1792099538091_iuunj4zp.jpg)ImgOps Exif Google Yandex

>>2328
yeah, layering is the only way to make it look real. i usually do a 1px or 2px offset with a high alpha for that sharp edge and then a much larger spread. if you just use one huge box-shadow it looks like a mistake smudge on a dirty lens. op is right about the unanchored feeling too. without that tight dark border, there's no sense of where the card actually sits in 3d space. i hate how people think high blur values are some kind of shortcut to modern design when it just looks like low-res garbage.

d5ce5 No.2334

>>2329
>if you just use one huge box-shadow it looks like a mistake smudge on a dirty lens

i actually think that tight dark border can sometimes make the interface feel too heavy and cluttered if there's already a lot of high-contrast content around, so i usually try to lean into much softer, almost imperceptible transitions to keep things feeling light.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]