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: https://codepen.io/kevinpowell/pen/qo...
CodePen 2: https://codepen.io/kevinpowell/pen/NY...
CodePen 3: https://codepen.io/kevinpowell/pen/JL...
link to material design

Much of this was inspired by the material design documentation: https://material.io/guidelines/materi...

---

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: How to automatically refresh your bro...

---

Support me on Patreon: 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 YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

• #education
• #kevin_powell
• #tutorial
• #html
• #css
• #shadow_blur
• #box_shadow
• #css_effects
• #css_box_shadows_tutorial
• #css_box_shadow_tutorial
• #css3_box_shadow
• #css_box_shadow_basics
• #css3_box_shadow_basics
• #css3_box_shadow
• #how_to_use_css_box_shadow
• #css_box_shadows
• #css_box_shadows
• #css_box_shadows_explained
• #css_box_shadows_explained
• #how_to_use_box_shadows
• #box_shadows_explained
• #how_to_make_box_shadow_look_good
• #how_to_make_box_shadows_look_good
• #make_css_box_shadow_look_good