CSS box-shadows – how to make them look good
Loading advertisement...
Preload Image
Up next

UMG / Widgets – Keyboard/Gamepad Menu

Cancel
Turn Off Light
Auto Next

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/qoMeZX
CodePen 2: https://codepen.io/kevinpowell/pen/NYLQzW
CodePen 3: https://codepen.io/kevinpowell/pen/JLagqZ
link to material design

Much of this was inspired by the material design documentation: https://material.io/guidelines/material-design/elevation-shadows.html

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

Show More