3 Box Shadow Tricks You MUST Know

Box shadows can make things look nice, but they can also be used in unusual ways to pull off some fun effects as well!

In this video, I look at three hacks that you can use with box-shadow: faking multiple borders, a modal 'background' with no extra markup, and a peeled corners effect.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[sumankathet]

The thing I like about your videos is that you always do something that we could use in our real world projects.... I follow many other web developer youtubers but the content I find in your videos, I found in none...
Thank you very much sir😊😊

[bloxzyo]

This is the best box shadow series.... making them all inset to not affect the box model was a genius

[josema-boy]

This video was definitely my cup of tea. Thank you very much. Cheers!

[The-Average-Gamer]

The modal shadow trick is really cool, thank you.

[jennyjanssen]

Absolutely love the Peel effect. Thank you for showing how to get this done.

[christopherikpat]

thank you kevin. my confidence keeps getting better with your videos. much appreciated

[kamaboko]

Given the sheer volume of content providers on YouTube it is difficult to create one's own style, while delivering quality content at the same time. You have achieved both.

[shubham]

I never understood css this good in past year as much I learned from your channel in just 1 month.

[tomchrist]

Another fun hack is that since the box-shadow starts at the edge of the box, so you can use a transparent div to create a window through a dark screen to the content below. Then absolute position and size your window to put it over content you want to highlight.

[nitram_nosnibor]

Oh maaaan the peeled corners effect it pure genius!!! Loved this series, thanks Kevin.

[suthakharponnambalam]

It's 2021 and here I am searching "Kevin Powell box-shadow prop", thanks to Kevin for all the amazing content!

[gabiold]

Pretty surprised I did just found your channel! I like these great little things which are very useful in real-word building bigger things!

[ralexand]

Beautfiul! Always wondered how that peeled corner effect was made.

[FilipeFreire]

man, it's amazing how much I learn from watching your videos.. this video was top notch! Thank you so much!

[andreaskarz]

Wow, the modal hack it's really amazing. Thank you

[SmokeyNinja]

Your videos are truly the best I've seen. They are very helpful.

[thomasmeiller]

thks. I learned just another cool things about box-shadow's functionality + features!

[AmirulIslam-ggfn]

Thanks a lot. I have learnt a lot about box shadow from your box shadow series.

[Nikkupikku]

I am so glad I came across your channel . Thank you.

[CarAudioInc]

thanks so much for your effort, your videos are awesome, definitely my favorite webdev youtuber