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

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.

IS THERE ANY WAY I CAN DO THIS THE SAME IN PREMIERE PRO?

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.

Brilliant. I wonder if drop-shadow's spread radius is supported by browsers now

Nice video, but how can we put the shadows on our blog posts?

Great video!

This video was extremely helpful..

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

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

gran video

So on mobil is hard to see the code. Too small

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!

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

Yesssssssss

But why do you feel it's weird to have two types of shadows? It's BOX shadow and it's supposed to be a shadow of the box surrounding it. What else do you expect? Anyway it's new knowledge for me that filter drop shadow existed. Thanks for that 😅

Not sure it's so bad that box shadow ignores contents, at least this way we have one method to give shadow to contents and one to the box, I can see occasions when we'd want both

Hey kevin... Does filter-shadow have option like box-shadow: inset 0 0 10px black;

The positioning wasn't off when you used text shadow and filter shadow in combination. Instead you got a shadow of your shadow.

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

Note that on drop-shadow(), the 'inset' keyword isn't allowed either.

Damn, the scariest thing in the world to a dev is when the specs/docs say one thing and the reality is something else. I'm gonna have nightmares about this.

Why do all these web standards and frameworks keep proliferating without anyone consolidating them?

Learned something new today 💖

Nice video man

That backdrop you have is amazing! 😮

Hey Kevin, Do you have an html css tutorial from beginner to advance?

Great tutorial ! :)

Nice and straight to the point.

Nice! Thanks for the tips.

Thank you Kevin. I still learning The videos are very helpfull,

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

before I watch this video, let me guess the catch! multiple drop-shadows shadow the everything including previous drop-shadows (as it is a filter that builds up on previous filters), white multiple box-shadows always drop the shadow of the object (box) ignoring previous box-shadows. This messes up the geometry of shadow-effects (e.g. 3D-effects using box/text-shadow, where the next shadow is one pixel more away from the object ... using the drop-shadow each shadow is exactly 1px away from the already filtered object ... I accidently copy/pasted a set of text-shadows into a drop-shadow-command before I got this) ... ok, I now watch the video. Now, after I watched the video: I think could tell you something new.

THX
very much

Good tips. Thank you Kevin :) hi from japan

Hey Kevin, I was wondering if you could make a video on how to prevent FOUC. It's annoying me :<

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

Thanks Kevin!

You are awesome

Nice one

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

Very useful video .. thank you

Thank you kevin

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

Kev, It's always interesting to watch your videos. I'm not sure if you're gonna watch this, but thank you for the free Responsive layouts course 🥰

You are awesome. Love these types of contents.

GIF is clearly pronounced 'gif' :-)

may be, with that property we will make neon?