Box shadows are a fantastic way to add depth and that little special something to your website. They are part of a lot of design systems, most famously Google’s Material Design, and for good reason, they can really bring things to another level.
Before we dive into how to use them effectively though, it’s important that you understand how the box-shadow property really works, so in this tutorial, I take a look at all the values, which ones we can omit, as well as how to have multiple box-shadows on one element.
Codepen link: https://codepen.io/kevinpowell/pen/EEpEGZ
—
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: https://youtu.be/h24noHYsuGc
—
Support me on Patreon: https://www.patreon.com/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: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
