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);