Box Shadow in CSS (Part-2)
Tags: webdev, css, beginners
Published: 2020-09-16 16:04:26

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](https://dev.to/ritvikdubey27/box-shadow-in-css-1lf3).

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.

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

{% codepen https://codepen.io/ritvikbunny/pen/GRZBbra %}

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.

```CSS
color: red;
box-shadow: 0px 0px 10px 10px;
```
or you can also use **currentcolor**
```CSS
color: red;
box-shadow: 0px 0px 10px 10px currentcolor;
```

{% codepen https://codepen.io/ritvikbunny/pen/poyZEGY %}

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

```CSS
border: 15px ridge currentcolor;
```

{% codepen https://codepen.io/ritvikbunny/pen/NWNBbxo %}

##**Importance of opacity in shadow**
If you don't use opacity in shadow then the shadow will look overwhelming.

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

{% codepen https://codepen.io/ritvikbunny/pen/VwaBmPr %}

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

```CSS
box-shadow: 0px 0px 25px 20px rgba(0,0,0,.25);
```
See know it looks better.

{% codepen https://codepen.io/ritvikbunny/pen/BaKPQZv %}

##**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.

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

{% codepen https://codepen.io/ritvikbunny/pen/WNwKodV %}

##**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.

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

{% codepen https://codepen.io/ritvikbunny/pen/oNxMaYW %}

##**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**
```CSS
box-shadow: 0px 5px 15px rgba(0,0,0,.5);
```
**higher**
```CSS
box-shadow: 0px 5px 70px rgba(0,0,0,.5);
```

{% codepen https://codepen.io/ritvikbunny/pen/GRZBZBP %}

###**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**
```CSS
box-shadow: inset 0px 5px 15px rgba(0,0,0,.5);
```
**higher**
```CSS
box-shadow: inset 0px 5px 60px rgba(0,0,0,.5);
```

{% codepen https://codepen.io/ritvikbunny/pen/BaKPMYv %}

##**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**
```CSS
box-shadow: 0px 5px 15px rgba(0,0,0,.5);
```
**higher**
```CSS
box-shadow: 0px 5px 15px rgba(0,0,0,.5);
```

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

{% codepen https://codepen.io/ritvikbunny/pen/abNjXPw %}

##**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.

```HTML
<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**
```CSS
box-shadow: 0px 5px 20px rgba(0,0,0,.5);
```
**inner**
```CSS
box-shadow: 0px 5px 10px rgba(0,0,0,.5);
```

{% codepen https://codepen.io/ritvikbunny/pen/jOqpoMJ %}

####**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](https://codepen.io/ritvikbunny) 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](https://twitter.com/ritvikdubey27?s=09) or [LinkedIn](https://www.linkedin.com/in/ritvik-dubey-3bbb22169)