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.

link to material design

---

---

---

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.

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

[paritoshbatish]

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

[rezarahman]

Lots of thanks. You are just awesome .💖💖

[christopherikpat]

thanks kevin. you're a great teacher

[CarlosReveles]

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

[nagahumanbeingzooofparticl]

Another awesome tip for box-shadows. Thank you.

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

[shreejitpal]

This video gives me all sorts of ideas 🤔

[emmanuelmwangi]

good tutorial Kevin really enjoyed it🤗

[lekhavlekhav]

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

[Rocadamis]

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

[mareksawinski]

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

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

[sumankathet]

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

[andrewnoonan]

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

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

[Epicradarofficial]

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

[naimur]

Do u have any videos about styling custom video elements?

[thangjamkishorchand]

Kevin do a Website review ? Just curious

[stoyanchorbov]

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