Box Shadow in CSS (Part-2)

This is the part-2 of box-shadow in CSS. In this blog we will see some concepts of box-shadow which we can use to create our website look beautiful. In this blog major part will be about elevation using box-shadow. To learn about basics you can check the part one here.

So let's learn how to use box-shadow property to make our design look better.
Note :- The shadow color is not black by default.

box-shadow: 0px 0px 10px 10px;

In the above case since there is no color set for shadow then it will be black by default.

If you don't give a color to shadow then the color of shadow in that case depend on the color property. It's always inheriting but don't rely on it because sometimes it becomes transparent.

color: red;
box-shadow: 0px 0px 10px 10px;

or you can also use currentcolor

color: red;
box-shadow: 0px 0px 10px 10px currentcolor;

Tip :- currentcolor property can also be used with border property.

border: 15px ridge currentcolor;

Importance of opacity in shadow

If you don't use opacity in shadow then the shadow will look overwhelming.

box-shadow: 0px 0px 25px 10px black;

Instead of directly adding color name if you use rgba() then lowering the opacity will be possible and shadow will look better.

box-shadow: 0px 0px 25px 20px rgba(0,0,0,.25);

See know it looks better.

Removing or reducing spread-radius in shadow

By removing spread-radius you can make shadow even better, because spread-radius was making the shadow bigger than it needed to be. If you still want to use then pass smaller value in it.

box-shadow: 0px 0px 25px rgba(0,0,0,.25);

Adding some vertical offset to make it look even better

If you add vertical offset then your shadow will be little bit darker at bottom. It will appear like it's little bit hover from background, it gives it some elevation from bottom.
Remember :- Having strong shadow doesn't makes it look better.

box-shadow: 0px 15px 25px rgba(0,0,0,.25);

Making any element look higher using box-shadow

You can make any element look higher than other simply by just increasing blur-radius, this will simply make element look higher.

lower

box-shadow: 0px 5px 15px rgba(0,0,0,.5);

higher

box-shadow: 0px 5px 70px rgba(0,0,0,.5);

Applying the same with inset

So if you add inset then you will find that shadow with lower blur-radius looks close to background and shadow with higher blur-radius will look much far from the background.

lower

box-shadow: inset 0px 5px 15px rgba(0,0,0,.5);

higher

box-shadow: inset 0px 5px 60px rgba(0,0,0,.5);

Making element look even higher on hover

It makes the element looks elevated up of page instead of just bigger and smaller.
Remember Don't keep blur too much or too little.

lower

box-shadow: 0px 5px 15px rgba(0,0,0,.5);

higher

box-shadow: 0px 5px 15px rgba(0,0,0,.5);

On hover

#higher:hover {
box-shadow: 0px 5px 70px rgba(0,0,0,.5);
transform: scale(1.1);
}

Overlapping content using box-shadow

If you just want to make any element, say button or a link or anything, look over the main content then overlapping comes into the play.

<div id="main">
  <div id="inner"></div>
</div>

To make inner element to look over main element keep blur-radius of inner element lesser, if you give both of them similar values then it will not look good.

main

box-shadow: 0px 5px 20px rgba(0,0,0,.5);

inner

box-shadow: 0px 5px 10px rgba(0,0,0,.5);

There are more cool properties left that we will discuss in last parts.

I'll be sharing Part-3 very soon. Until then you can check my pens at CodePen here I have some awesome work done with box-shadow

Thanks for reading this article.

Any feedback would be greatly appreciated.

Connect with me on Twitter or LinkedIn