Pro tip: That single div CSS trick for complex shapes isn't always worth it

I spent like 3 hours trying to make a jagged mountain range landscape effect using nothing but box-shadow and pseudo elements. Saw this guy on YouTube make it look so easy. My mentor from work just shook his head and said "Reese, just use SVG for this one." I finally swapped over and finished the whole thing in 10 minutes. Has anyone else hit that wall where you're trying to be too clever with CSS? When do you decide to just use SVG instead?

2 comments

2 Comments

faith_smith12h ago

Blame it on CSS-Tricks for making box-shadow look like magic. I've definitely wasted a whole afternoon trying to force a CSS-only solution when a tiny inline SVG would have worked in 5 minutes.

garcia.miles9h ago

And the worst part is you spend all that time tweaking box-shadow values just to get it to look right on one browser, then you check Firefox and it's completely different. I've been burned by that exact thing more times than I can count. Plus those inset shadows for the "raised" UI effect always end up looking muddy unless you layer like three different shadows on top of each other. Meanwhile you can just drop a quick SVG filter on a shape and get this clean, consistent soft glow that works everywhere. CSS-Tricks is great for learning fundamentals but sometimes they make you feel like a failure for not knowing the "pure" way to do something.