Hot take: people need to stop using box-shadow as a replacement for borders

I was looking at a checkout page yesterday and the button borders were so blurry they looked like they were vibrating. If you're gonna use box-shadow for focus states at least test it in dark mode first.

2 comments

2 Comments

nathanking1d ago

Yeah dark mode is where box-shadow borders really fall apart. I've had to go back and fix entire component libraries because the shadow looked fine in light mode but turned into a muddy mess when the background went dark. My rule of thumb now is to keep the blur radius under 4px if you're using it as a border substitute, and always set the spread to at least 1px so it doesn't completely disappear on hover states. Also test on actual hardware, not just browser dev tools - cheap monitors handle shadows way differently than retina displays.

vera_roberts1d ago

omg wait do you test on like a cheap monitor first or a nice one?