17th October 2020

4 cool things you can do with box-shadow

I think it even might be a series! You know, X cool things you can do with Y. Might be fun! And it also looks like something both: interesting and easy-enough to write, so I won’t start and ditch it after a while. Maybe!

So, ladies and gentlemen! Our first guest is box-shadow. Let’s welcome them to the stage!

1. 3D-like buttons

That one is kinda obvious and popular. But still, it’s cool! There are different approaches to “3D-like buttons” but this one allows for various backgrounds. You can use solid color, or gradients, or images, or mix of those — doesn’t matter. The “shadow” applies to inside of the element and shows “between” the text and the background of it.

See the Pen 3D-like Button by Yzoja (@Yzoja) on CodePen.

2. Neomorphism

One of the newest trends when it comes to CSS and Web Design. Works well with a dark and light background (just can’t be totally white or totally white) and it’s… cute? It’s subtle and modern. Gives you the feeling of layers, without heavy-ish usual shadows.

See the Pen eYzZPEd by Yzoja (@Yzoja) on CodePen.

3. Product / Blog Post Cards

I remember a few years back when someone asked: “how to achieve a shadow, that’s not strictly under the element”. Meaning, it’s narrower than the box itself. With box-shadow and negative fourth value, it works like a charm! Just take a look.

See the Pen Box-shadow’s use in post cards by Yzoja (@Yzoja) on CodePen.

4. Overlay

There are at least a few ideas to achieve almost the same thing. While the usual approach might be with linear-gradient, I like to do it with box-shadow. There is a bit more… flexibility?

With shadow applied to :before we can even use mix-blend-mode and other fun stuff! The shadow also is not as straight, as it would be when using linear-gradient.

See the Pen Gallery caption box-shadow by Yzoja (@Yzoja) on CodePen.

✨ Gradient “box-shadow” effect

That’s not exactly “box-shadow”. I mean, it is and it isn’t at the same time. It’s a shadow applied to a box, but I’m not using the box-shadow property.

I think it’s cute, and the fact, that it’s using just :after and doesn’t need anything in the markup, is definitely a plus.

See the Pen Gradient “box-shadow” by Yzoja (@Yzoja) on CodePen.


Leave a Reply

Your email address will not be published. Required fields are marked *