Pretty borders with box shadows
A small CSS trick
As a designer, I play with shadows every day. I use shadows primarily to imply elevation, the distance between components along the Z-axis. Here's a card component using one of the two shadow properties, box-shadow
(the other is drop-shadow
):
Well, that looks OK! I used a semi-transparent black colour to create the shadow. While using a colour based on the background (blue) would result in a better-looking shadow, we're about to discuss another issue: What if we change the background colour to be the same as the card background colour? Let's take a look:
You might notice that the top of the card component blends even too well with the background. As a designer, I'm tempted to fix the issue by adding a slight border:
While that approach solves the blending issue, it poses a new one: The border is darker than the shadow on the sides but lighter on the bottom. This makes the bottom part look blurry.
The challenge is that the shadow with a Y-axis offset will be darker on the bottom. A solution could be to use a linear gradient on the border. While that's technically possible, I propose a more straightforward solution: Using the box-shadow
property also for the border. This is how it looks:
Much better! The border adapts to the shadow colour as the two transparent shadows overlap. Here's how it looks in detail:
And here's the shadow value:
box-shadow:
0px 10px 14px 0px rgba(0, 0, 0, 0.1),
0px 0px 0px 1px rgba(0, 0, 0, 0.05);
While I assume this technique has been around for a while, I was late to the game and discovered it only lately on the Next.js website. If you feel like you want to learn more about shadows, I recommend Josh W. Comeau's wonderful article on the topic.
Enjoy your new shadow and border superpowers! 🤩
Get in touch
I'm not currently looking for freelancer work, but if you want to have a chat, feel free to contact me.