Why are there two ways to make shadows in CSS? box-shadow vs filter: drop-shadow()

There are a few different ways to create shadows in CSS, so in this video, I look at the difference between two of them: box-shadow and filter: drop-shadow().

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[joejoe]

Great tutorial. I was curious if you could still do multiple shadows using filter:drop-shadow(), and turns out you can, but it's worth noting the syntax is slightly different than box-shadow:

filter: drop-shadow(0px 0px 6px blue) drop-shadow(0px 0px 20px red);

rather than:

box-shadow: 0 0 6px blue,
0 0 20px red;

Just noting for anyone else curious.

[Eweyhen]

Your videos are a great compliment to the other online courses I'm taking for CSS. It seems whenever I have questions regarding whether or not something can be done in CSS, I find the answer with you. Thank you!

[RassinNL]

Only 130k weird. Your chanel is the most relaxed one ever. Keep it up cause you are a day saver.

[kvncnls]

So glad I found your videos! You've got some of the most niche CSS topics that I haven't heard of, but they solve so many annoyances. Thank you!

[silentphil]

That color information "that wouldn't be useful" was total gold! thank you very much mate! BTW love your content

[ti_oluwa]

Great stuff Kevin. I've been battling this since but now it's all clear. Thanks 😊

[hectorvasquez]

The gotcha is pure gold! You just nail what I needed. Thanks!

[rajatgoyal]

Thanks man, you are clearing my doubts, please upload more videos on how we can make components responsive

[CasperioSs]

Thanks for the color tip. You make my life so much easier

[VasilyPavlik]

Absolutely unbelievable supercool! This is exactly what I wanted to do a week ago. And I even didn't know about drop-shadow. Thank you a lot!

[Jastrzab]

Wow that was exactly why I dropped this filter thing few days ago. Thank you very much :)

[maneeshrockx]

I'm a beginner your vedios helped me to learn many concepts, thankyou sooo much. #love from India🙂.

[pawanrathore]

This is really helpful thank you so much ...

I love the way you explain the things.

[huseyin.goktas]

You are awesome. Love these types of contents.

[LorenHelgeson]

Fantastic video. Didn't know about the bug with the "spread" value.

Speaking of the box model, as in the box-shadow property, one video I would like to request - not for myself but for CSS beginners - is an explanation on the difference between margin and padding, and border and outline. It really opened up a lot of avenues on what I could do with CSS once I learned what each one does.

If you haven't covered it already, that is.

[RodrigoDAgostino]

Thank you again, Kevin! Love your content, mate :)

[ga]

Kevin, That was absolutely beautiful, Thank you so much for putting this out for us.

[AmxCsifier]

I just used drop-shadow in production, I guess watching your video was a great investment XD

[manikaverma]

I think you have to first remove the image background then you can apply drop-shadow(), otherwise it will work as box-shadow only. This is so important part of drop-shadow() concept but nobody is pointing it out.

[tadakuniyasuda]

Good tips. Thank you Kevin :) hi from japan