Rant: People keep using overflow hidden for CSS art shadows and it drives me nuts

I saw three pieces in the gallery this morning where folks used overflow hidden on a parent div just to fake a shadow effect. Look I get it, it works in a pinch but it kills the whole point of layering art. You end up clipping the shape and losing the edge detail. I spent 2 hours last night redoing a glass orb piece because my clip path kept getting eaten by overflow. Switched to using box shadow with spread and a pseudo element instead and it looks way cleaner. The shadow actually breathes around the object now. Has anyone else run into this or found a better workaround for complex shapes?

2 comments

2 Comments

tessawebb5d ago

Hard disagree, overflow hidden saves me time and works fine if you plan around it.

grant_torres5d ago

Yeah @tessawebb I'm with you on that. I use overflow hidden all the time for image containers and it saves me from writing a bunch of extra media queries. The key is just knowing where to apply it so you don't accidentally clip something important like a dropdown or a tooltip. Do you ever pair it with position relative to keep things clean?