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 RUclips 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.

[@patrickbroaden9820]

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

[@rezarahman1782]

Lots of thanks. You are just awesome .💖💖

[@nagahumanbeingzooofparticl8836]

Another awesome tip for box-shadows. Thank you.

[@KevinPowell]

Glad you liked it :)

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

[@eetede84]

you're the best Kevin

[@christopherikpat5512]

thanks kevin. you're a great teacher

[@KevinPowell]

Thanks Christopher :D

[@sobeidalagrange7129]

Very enlightening!!!

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

[@lekhavlekhav9882]

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

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

[@emmanuelmwangi3071]

good tutorial Kevin really enjoyed it🤗

[@mareksawinski8225]

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

[@KevinPowell]

Thanks Marek, glad you liked it!

[@shreejitpal6598]

This video gives me all sorts of ideas 🤔

[@Justin-nf6tw]

thank you sir

[@toderox]

Great!

[@sumankathet2560]

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

[@KevinPowell]

No problem, glad you like them 😁

[@Rocadamis]

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

[@roytating4915]

Awesome!

[@yassmaboby296]

cool !!

[@yunmulu1659]

thanks.

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

[@user-tp1rw8xb8i]

Thank you :) you help us a lot

[@KevinPowell]

No problem at all :D

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

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

[@md.rakibulislam8064]

Good video

[@Epicradarofficial]

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

[@tilakmadichettitheappdeveloper]

i wanted inset shadowing . can you explain ?

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

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

[@mohammedriyazuddin5649]

thanks

[@KevinPowell]

No problem at all!

[@adone.business]

T
haks kevin powell

[@rbhakusho3843]

cool

[@KevinPowell]

Glad you liked it :)

[@amyp.575]

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

[@KevinPowell]

Sorry about that.