CSS Box-Shadow tutorial: the basics

Box shadows are a fantastic way to add depth and that little special something to your website. They are part of a lot of design systems, most famously Google's Material Design, and for good reason, they can really bring things to another level.

Before we dive into how to use them effectively though, it's important that you understand how the box-shadow property really works, so in this tutorial, I take a look at all the values, which ones we can omit, as well as how to have multiple box-shadows on one element.

---

---

---

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.

[arunsharma]

I rarely leave comments, but your explanation was mind-blowing. Thank you, you have gained a new subscriber.

[neging.]

The box-shadow property really confused me. Thank you for explaining it so clearly!

[ozzyfromspace]

This was a phenomenal tutorial, Kevin! Your patient discussion made the syntax way more digestible for me 🏆

[picool]

One of my favorite tutor till date. Thanks Kevin for always being so descriptive about topics..

[maevanako]

I think you deserve more than just 118k suscribers. SERIOUSLY!!!! Y'all we need to share his vids more often with your friends and collegues.

[umenakid]

This is it! That is the type of video peope like myself need. No complicated detours - just straight, easy and detailled info. Amazing! Thank you.

[TinyMaths]

Honestly man, you're making the painful parts of the early learning process less traumatic; I'm even enjoying it somewhat.

[mixshots]

what an explanation : excellent detailed explanation, you simply put all the information into my mind without letting me to go back again

[nickgoudeau]

Thank you for all of the content really means a lot to me and the community

[lalitarao]

Thank you for explaining in depth about box-shadow property

[RameenFallschirmjager]

For some reason this tutorial reminded me of lunar eclipse! And after speaking English for many years finally I understood the meaning of off-set!

[aleksandravalchanova]

extremely helpful. had a hard time understanding the boxshadow property until i saw your video <3 thank you

[vegeta]

you made this property from my most hated to my favorite thanks for thorough explanation

[dosomething]

I always love when i need your videos for something. I always expect to learn an exceptional amount about the topic, and you never fail me. Thanks!

[sunandarlinn]

Thank you so much. Now I clearly understand how box-shadow property works.

[maximmarinovskyi]

Hi! It's really great and important video abouy the box-shadow property. Thank you!

[hishamrabea]

Man you are so great ! I just discovered your channel today and I think its the best discovery happened since they discovered the internet 😁

[Xxxsorrow]

5:09 THANK YOU! That's exactly what I've been looking for. :D

[claudiomarcio]

The way you explain things is awesome.

[Lemon-lpqb]

Thanks, now i really understand how box-shadow property works.👍