CSS box-shadows - how to make them look good

Knowing how to use the box-shadow property is one thing. Using it in ways that actually make your designs better is a completely different story! This video is all about how to use CSS box shadows in ways that enhance your designs.
First I look at the very basics, which is pretty much to make them really subtle. If you think that it's too subtle, you've probably nailed it.
Second I look at how the size of the blur can affect a users perception of height, or how far off the element is from what is below it.
CodePen 1: codepen.io/kev...
CodePen 2: codepen.io/kev...
CodePen 3: codepen.io/kev...
link to material design
Much of this was inspired by the material design documentation: material.io/gu...
---
I have a newsletter! www.kevinpowel...
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...

[@Hopewe]

I just wanted to say that your content is simply amazing, because while not only you're being consistent with uploading, your exlanation is very good and the variety of advanced topics just top it off! Hats off!!

[@KevinPowell]

Thank you so much for the kind words, I'm really glad that you're enjoying my videos 😊

[@sobeidalagrange7129]

Agree with Hopewe 0247!!! :)

[@tobycollin5759]

Dunno if you guys cares but if you guys are bored like me atm then you can stream all the new series on instaflixxer. Been streaming with my girlfriend these days xD

[@sincereace6053]

@Toby Collin yup, have been watching on InstaFlixxer for years myself :)

[@paritoshbatish9984]

Thank's a lot man! For someone who has lazily done his CSS, your videos are really helpful.

[@eetede84]

you're the best Kevin

[@rezarahman1782]

Lots of thanks. You are just awesome .💖💖

[@patrickbroaden9820]

Great video..keep them coming..💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯

[@christopherikpat5512]

thanks kevin. you're a great teacher

[@KevinPowell]

Thanks Christopher :D

[@CarlosReveles]

Shawdows .... Just saying! I'm creating my own website and I've learned a lot from you, so a big thank you!

[@KevinPowell]

Thanks for pointing that out! And I'm glad the video helped 😁

[@nagahumanbeingzooofparticl8836]

Another awesome tip for box-shadows. Thank you.

[@KevinPowell]

Glad you liked it :)

[@sobeidalagrange7129]

Very enlightening!!!

[@shreejitpal6598]

This video gives me all sorts of ideas 🤔

[@emmanuelmwangi3071]

good tutorial Kevin really enjoyed it🤗

[@lekhavlekhav9882]

Thank you soo much Mr. Kevin.. Keep going.. Helped a lot.. 😊😊

[@forrest_lump]

I think you should show the spread-radius in combination with blur-radius=0. That way you can easily show how this value reduces and enlarges the shadow layer.

[@clevermissfox]

Can box shadows use a gradient for the color? Assuming no bc I don’t think you can have a background image on a shadow. In this case you would make the shadow from a pseudo element?

[@mareksawinski8225]

Great video. I would like to see more stuff like this. TH-cam does not need more videos about box model or other standard crap. This is stellar. Thanks Kevin. :-)

[@KevinPowell]

Thanks Marek, glad you liked it!

[@sumankathet2560]

I was eagerly waiting for this video..
Thank you very much sir for these awesome contents😉

[@KevinPowell]

No problem, glad you like them 😁

[@jacqueskousteau788]

Thanks @kevinpowell for the helpful content. If transitioning the box-shadow property is still (in '24 - in case anything changed in the 6yrs since recording of this vid) bad for performance, what's a more performance optimal way to achieve the transition of a box shadow property?

[@roytating4915]

Awesome!

[@toderox]

Great!

[@Justin-nf6tw]

thank you sir

[@andrewnoonan5418]

was modifying a project n khan academy and when adding box-shadow , nothing happened-it was in a div-perhaps when i added another id tag to a h2 within that div will it stop seeing a box-shadow effect ??

[@naimur634]

Do u have any videos about styling custom video elements?

[@yunmulu1659]

thanks.

[@Rocadamis]

CHALLENGE! Make a parallax box shadow that moves with scrolling to suggest a moving of the light source!

[@yassmaboby296]

cool !!

[@user-tp1rw8xb8i]

Thank you :) you help us a lot

[@KevinPowell]

No problem at all :D

[@md.rakibulislam8064]

Good video

[@litellavi]

hi, you enplane so good so maybe you can help me understand how do i add a box shadow to each photo in a gallery of photos?

[@Destinymusic506]

greetings from Costa Rica

[@KevinPowell]

I wish I were in Costa Rica, it's snowing here :\

[@Destinymusic506]

@@KevinPowell jajajaja here summer time jajajja

[@Destinymusic506]

@@KevinPowell I have learned too much with their videos and that I am a beginner.

[@thangjamkishorchand]

Kevin do a Website review ? Just curious

[@KevinPowell]

Never done one for the channel, but doesn't mean I wouldn't do one :)

[@thangjamkishorchand]

@@KevinPowell coz i want to summit my site for review lol

[@mohammedriyazuddin5649]

thanks

[@KevinPowell]

No problem at all!

[@tilakmadichettitheappdeveloper]

i wanted inset shadowing . can you explain ?

[@Epicradarofficial]

Thanks dude. Could you please upload a tut on translate and mobile first website?? Thanks.

[@stoyanchorbov7159]

Video idea: How to make your website good looking on every device

[@KevinPowell]

I'll sort of be talking about that when I do my next 'building out a full-page' series, though that's a little while off.

[@rbhakusho3843]

cool

[@KevinPowell]

Glad you liked it :)

[@adone.business]

T
haks kevin powell

[@amyp.575]

No more yellow background, please. I could barely see any shadows at all

[@KevinPowell]

Sorry about that.