CSS Box-Shadow tutorial: the basics

[@picool13]

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

[@KevinPowell]

Super glad you liked it! Good to know there are other people out there who like to know the details on these things instead of just a passing understanding of them.

[@ozzyfromspace]

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

[@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.

[@arunsharma4709]

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

[@maevanako5914]

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.

[@neging.7377]

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

[@doxyshiva]

Same here

[@AndreasDelleske]

It’s shady business, what do you expect? :)

[@beglis2747]

@@AndreasDelleske Underrated comment

[@nickgoudeau8407]

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

[@KevinPowell]

You're welcome 😊

[@mixshots1801]

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

[@dosomething6975]

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!

[@Luxcium]

Your videos are addictive and I like the tone of your voice (some tutorials are really interesting but people making them have not interesting way of expressing themselves apparently) you are amazing 😉

[@TinyMaths]

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

[@aleksandravalchanova5797]

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

[@lalitarao366]

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!

[@claudiomarcio7579]

The way you explain things is awesome.

[@hishamrabea566]

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

[@maximmarinovskyi2267]

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

[@seanpheneger6632]

Looking forward to the upcoming segments, love the vids!

[@KevinPowell]

Glad to hear it sean!

[@sunandarlinn1767]

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

[@Xxxsorrow]

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

[@TazExprez]

I was reading the MDN and this helped me so much! Thank you!

[@srinivasaraoyp3640]

I like the way he explained the box shadow. Thank you.

[@ajimbong1623]

Thanks so much for all the quality CSS tutorials.. you're my favorite 🙏🙏

[@KevinPowell]

Thanks so much 😊

[@vegeta3406]

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

[@Justenphelps]

Your videos are like hidden gems on KZbin. You are really great at explaining things!

[@KevinPowell]

Thanks a lot Justen! I'm really happy that you're enjoying them, and I'm glad to hear that I'm doing a decent job of explaining things :)

[@Lemon-lp1qb]

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

[@IG7799-c4u]

I really just wanted to know what each of the values meant. I got my answer and more! Thanks for explaining in such a clear and precise manner :)

[@yashdevmurari7137]

Most amazingly described box shadow property!!!!

[@revillsimon]

Another awesome explanation, Kevin. Thanks!

[@KevinPowell]

No problem, glad you liked it :D

[@RoyerAdames]

Thank you for the great content. It's refreshing and just what I need.

[@elfusion9196]

Your tutorials are awesome, thank you!

[@scottsaccenti]

Really simple, clear explanation. Subscribed.

[@yunmulu1659]

Thanks, still useful after 6 years.

[@elielberra2867]

Thank you so much for this video! This explanation was super clear and helpful!

[@ericknicolasnunesdahora4860]

Amazing tutorial! Thank you so much!

[@santhoseaghilsanthose3317]

Awesome Video with crystal clear explanation

[@HassanPudineh-uo4kl]

Thanks for the video. In 9:46 you said you are skipping the offset but the true action was skipping the spread.

[@loveparmar1284]

once again sir . great video! 100 likes for you...

[@KevinPowell]

Thanks Tinny Learn :D

[@iliashterev38]

Hello from Bulgaria. Thank you for the nice tutorial. Can we say that the forth parameter - shadow spread is kind of shadow borders ?? Only seems they can not be taken one by one but all four.

[@kristijanbarabas9476]

Great tutorial! Thanks a lot. :)

[@markovujanic]

Absolutely awesome video. I never knew about currencolor property :). What noob I am :D. Thanks.

[@clevermissfox]

I never knew the shadow colour was inherited from the colour property! That is very, very interesting. I do wonder though if you have several elements like a header, a paragraph, and then a footer that has a different background colour with a different colour; and all three elements are set to different colours, how does it decide what the “currentColor” is … does it go off whatever is set on the body or does it cascade to the last colour set in your style sheet on that particular div that is gaining the shadow ? Gonna have to experiment! Thanks!!!

[@injikimo]

this made it so clear to me! thank you so much!

[@mdtamim-ci7jn]

Thank you so much for explaining very easily❤

[@michellelodgegonzalez7936]

Thank you. Useful information!

[@shubhamkohli7719]

This video is really helpful for me thank you for this video😊

[@Infoneson]

Wow! Didn't know about using inset or currentcolor. Thanks once again!

[@KevinPowell]

No problem at all!!

[@fayoseoluwaseun9448]

Thanks so much. This video really helped me.

[@jon4160]

Best video on the subject. That's a follow from me

[@kingplays5364]

nice, just awkward pause on 1st sec of video.

[@prodtrxllbeats]

lool yup

[@celina6204]

adds to the vibe

[@ashisharora9694]

Bro ur really awesome amd great teacher . i really watched ur all video . i learnt lots of lots of new things . i always wait for ur new tutorial . plz make one video of Animate full web page with jQuery . when we scroll down the page then content animated by own from different style in each sections . i dnot want any jQuery Plugin . good luck bro i wish u will get millions of subscriber soon . i have happily subscribed ur channel . You r r doing fantastic job . god bless u

[@KevinPowell]

Thanks for the kind words Ashish! I have something like that on my todo list, though if I did cover it, I might do it with vanilla JS instead of jQuery, as I've been moving away from jQuery lately.

[@abhishes]

very good explanation. thanks!!!

[@rhysjaggan9477]

Amazing video. I understand it now

[@jithinsurendran678]

I was at box-shadow, Kevin said we can change the spread property to -ve, and he changed value to -ve and pressed enter. Suddenly an ad started, I freaked out. LOL

[@minhazulislamasif6612]

awesome, u r the best mentor, respect and love from the heart

[@Chigaemezu.]

I understand it now, thank you🎉

[@ЕленаФедоренко-и5ц]

Очень полезно. Рекомендую. Наконец-то научилась работать с тенями правильно. Можно попробовать даже что-то из изометрии.

[@cpan2552]

Вы не можете использовать немного здравого смысла, чтобы сначала поместить свой комментарий в Google Transpose, а затем отправить сообщение? очень странно!

[@shakib_04]

so helpful with many properties

[@ADELONSI]

Really i'd like to thank you sooooo much regarding this useful video . Thanks a lot

[@Oswee]

Great vid. Would like to see something about :focus and :focus-within.

[@KevinPowell]

Good idea, I'll add it to the list for sure!

[@AnuragGuptainspired]

Suppose I jave a div of 90px width and have set blur-radius more than 90px (or more than the width of div) then how browser calculates the blur in this case?

[@abhishekroy7268]

One Word, THANK YOU. love from INDIA

[@notanarutard6951]

Kid: ThAtS tWo WoRdS

[@DimitriBoyarski]

Thanks, awesome guide. Are these safe enough to use in production? Should I vendor prefixes?

[@KevinPowell]

You can always check with caniuse.com but in this case, minded for prefixes

[@udarakasun]

Perfect kevin

[@mphikisenisiphuhlu7642]

Wow I'm impressed 🎉🔥🔥

[@HDChif]

Kevin, when you create new websites do you build everything from scratch or also use some frameworks to make life easier?

[@KevinPowell]

It depends on the project. Sometimes frameworks look like they'll save you time, but you end up overwriting 80%+ of their styles, it isn't such a time save after all. I learned a lot by using frameworks and learning and understanding how they worked, as well as how they approached naming conventions and things, but now I find that they can be limiting. I do teach full-time right now though (in the classroom), so I haven't been doing very much projects of late either though.

[@kishikishi6676]

Now I know! Thank you

[@getintosuccess8198]

nice.. thanks for this tutorial

[@mohamadhelaly4979]

Thanx alooooooot You r awsome. Please keep going. I can't wait till the next part Best regards

[@KevinPowell]

Thanks, Mohamad! Glad you're liking it :)

[@Zaque-TV]

So the spread is like how far the light source would be away from the object. The further away the light the bigger the shadow.

[@vishnuumakanthan9583]

Great Video!

[@raymondyoo5461]

You helped me a lot, thanks

[@ALESSTIG]

Hello nice tutorial, a question, I have a box with an icon inside and I would like to put a shadow only around the icon how can I do?

[@KevinPowell]

filter: drop-shadow() 😊

[@ALESSTIG]

@@KevinPowell THANK YOU, I WILL TRY

[@abdul_busybrain]

keep up the good work

[@TheElkster]

Great lesson!

[@KevinPowell]

Thanks Paul!

[@zackgig1612]

Can i use linear-background on it? Because i wanna use it as rgb

[@chapmansbg]

Instead of a colour can an image be used as a shadow? I want to use a flag when a customer choose their country code for their telephone number but I want the flag to look like a shadow.

[@Vihanga_Perera_Covers]

Understood ! Thanks bro!

[@Sammorris207]

It really helped thank you!

[@samahgad241]

thanks kevin. css hero😍🤩

[@salemmajed916]

Very GOOD tutorial thank you.

[@KevinPowell]

Thanks Salem :)

[@sonamuhialdeen7866]

So good tutorial

[@Oussamatvchar]

what is the code color of background body ?

[@doming258]

What is the editor you are using?

[@mianz167]

Informative. Thanks.

[@jadennadif7825]

thanks for the amazing explenation

[@souvikkundu]

Thanks. This really helped me.

[@al-aminhossain6824]

Dear Sir, I need a help. I'm trying to give a gradient on font awesome icon but it doesn't work on icon. It works only text. Can you help me by making a tutorial on this topic???

[@KevinPowell]

Which version of Font Awesome are you using? Also, how are you adding the gradient to the text?

[@karkar9608]

Nice setup what camera u are using

[@KevinPowell]

Just my phone, Galaxy S7. I'd like to get an actual camera at one point as it'd make my life easier, but can't justify the cost at the moment.

[@sapokurt2854]

Thank you for this

[@itsjustseanyeah]

Hey Kevin, nice video,, could you do one on animations and @keyframes, it would really help me. thanks and keep up the good work

[@KevinPowell]

I have one in the works sean, I just haven't had the time lately to really flesh it out yet. Maybe another month or two.

[@itsjustseanyeah]

No problem.. will be waiting

[@haidyibrahim9426]

Very helpful thank you

[@stepbystepscience]

very cool!

[@KevinPowell]

Glad you liked it :D

[@PawanKumar-bq6wj]

Thanks a lot for this

[@ertanmiyanyedi5415]

Thanks all. Wery clearly.

[@shsftech3792]

Thank you very much!!!!

[@pulok9909]

Really awesome

[@yogawithcarlos]

Congrats for the green screen upgrade

[@anggamxfx476]

Hi kevin i love the video .but i'am on hard time now i get frustation with image how you dealing with img, maybe you have some advice for me. I am gonna appreciate that so much

[@KevinPowell]

What exactly are you having trouble with, with images?

[@anggamxfx476]

Ya image, the image too big and too small or being cut off, i try to figure it out what the ideal width and height of an image

[@KevinPowell]

It's hard to ever know the 'ideal' because we have to take so many different things into account, from screen size to orientation. I have 'responsive images' on my todo list, where I'll be going into detail how to handle images when planning for different screens, but that video might be a ways off. A very basic, simple start is to do something like: img { max-width: 100%; height: auto; } Just so at least the images are responsive and will fit within their containers properly.

[@anggamxfx476]

Thanks a lot that help me out

[@parvezmd6455]

sir what the difference between margin-right:50px vs margin-right:-50px???

[@KevinPowell]

margin: 50px will push it 50px away from the right side, -50px will pull it 50px toward the right (assuming it's aligned to the right to start with). Alternatively, if there are things to the right of the element, 50px will push them 50px away (toward the right), and -50px would suck them 50px toward the element.