The trick nobody warns you about with CSS box shadows

I spent 2 hours debugging why my CSS art looked muddy until I realized everyone else is stacking box shadows without realizing they need to layer them with commas for depth. Has anyone else fallen into this trap where your shadows just look like a blob instead of a 3D effect?

2 comments

2 Comments

schmidt.blake9d agoMost Upvoted

Wait wait wait. You're telling me I could have been stacking shadows with commas this whole time? Oh man, I've been so annoyed at my drop shadows just sitting there like a thick blurry mess. I always just did one big shadow and called it a day, but now I'm wondering how many hours I've wasted. Actually that makes total sense why my shadows never popped right. I bet that's why my little geometric art pieces always looked flat and muddy around the edges. I'm honestly a little mad nobody told me this sooner.

fiona_nelson519d ago

Felt that so hard honestly. I spent like 2 years doing one big fat shadow and wondering why my stuff looked like a weird blurry mess in the corners. Then a friend showed me stacking them with commas and it was like a lightbulb went off. I've been making up for lost time ever since, just layering tiny shadows on everything. My favorite trick now is doing like 4 or 5 light shadows with a tiny offset instead of one big heavy one - makes everything look so much cleaner. Its wild how such a small thing changes the whole feel of a design.