Found a neat trick for making CSS rain look 3D with just box-shadow

Last month I was messing around with a rainy window scene for a commission and got stuck making the drops look like they had depth. Tried all sorts of gradient hacks but nothing clicked. Then I realized if I layer multiple box-shadows with slight offsets and different opacities on a single div, it looks like droplets with shadows underneath. Saved me like 80 lines of code. Has anyone else tried using box-shadow for 3D effects in pure CSS?

2 comments

2 Comments

willow_anderson856d ago

My buddy Dave tried this exact thing last month when he was making a landing page for a local band. He spent like 3 hours fighting with SVG filters and almost gave up, then I showed him your trick. He layered like 6 box-shadows with a 1px offset each time and dropped the opacity from 0.6 to 0.1 and it actually looked like real rain on glass. His client loved it so much they asked him to do the whole site with that stormy window vibe. He told me it saved him from writing a bunch of messy JavaScript too, which was a huge bonus since he's not great with JS anyway.

simonreed6d ago

Yeah the box-shadow layering trick is a lifesaver, I've used it to fake reflections on UI elements when I didn't want to mess with canvas or a filter stack. Once you dial in the offset and opacity patterns it beats JavaScript for simple effects every time.

-1