Box Shadow in CSS (Part-3) 
Tags: webdev, css, beginners
Published: 2020-09-23 16:15:24

This is the part-3 of box-shadow in CSS. In this blog we will see some awesome designing hacks related to box-shadow. To start with basic you can check [Part-1](https://dev.to/ritvikdubey27/box-shadow-in-css-1lf3) and [Part-2](https://dev.to/ritvikdubey27/box-shadow-in-css-part-2-1cgl).

So let's start :-
# Text-shadow 
Using text-shadow you can give shadow to your text. Most of the properties of text-shadow are similar to that of box-shadow except **spread-radius**, yes there is no spread-radius in text-shadow.

### **Syntax**
```CSS
text-shadow: X-offset Y-offset blur-radius color;
```
**Remember :-** In text-shadow we use smaller value of **blur-radius** as compared to box-shadow to make shadow look settle.

```CSS
text-shadow: 5px 5px 2px rgba(0,0,0,1);
```

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

# Using box-shadow on text
Yes we can apply box-shadow on text also. On applying box-shadow to text the shadow which which will be generated will be actually in the box-shape, it will form a box around and then shadow of that box will be generated.
So it is suggested to use text shadow instead.

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

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

# Using drop-shadow on text
We can also apply drop-shadow on text. Applying drop-shadow and text-shadow will give you a more similar and settle shadow.

### **Syntax**
```CSS
filter: drop-shadow(X-offset Y-offset blur-radius color);
``` 

```CSS
filter: drop-shadow(5px 5px 2px rgba(0,0,0,1));
```

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

# Let's learn more about **drop-shadow**
Drop-shadow is used most when we want to add shadow to a **.png** image we can also apply it to other image formats too but its effect can be understood more clearly by using it on a png file. When we apply drop-shadow to a png image whose background is transparent then the shadow will be formed only around the parts of image where there is content. 


```CSS
filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
```

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

## Difference will be more clear by applying **box-shadow** to same image
When you apply box-shadow to an image then the shadow formed will be shadow of box-shape, that is you can't see detailing in this shadow.


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

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

**Note :-** drop-shadow uses properties as text-shadow use. You can replace text-shadow with drop-shadow but on replacing drop-shadow with text-shadow it won't work as drop-shadow.

# Let's see some box-shadow hacks

### **Border using box-shadow**
You can create a border or multiple borders using box-shadow. To do so you have to use **spread-radius**. While giving it spread-radius keep in mind that when you are creating a single border then you have to give spread-radius the value of which size of border you want. And if you are creating multiple borders then the **spread-radius** of next shadow must be give value greater then that of previous.

**For single border :-**
```CSS
box-shadow: 0px 0px 20px #fca311;
```

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

**For multiple borders :-**
```CSS
box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;
```

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

**Note :-** To keep width of borders to be equal you have to increase the spread-radius in its multiples.
Okay hold, there is no rocket science in it, if the spread-radius for first border is 10px then for the second border multiply spread-radius of first border by 2 and similarly for third border multiply spread-radius of first by 3 and so on.

### **Adding border-radius to it**
Yes you can add **border-radius** to the borders you created using box-shadow. To do so you have to add border-radius normally as you always add.

```CSS
border-radius: 5%;
box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;
```

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


### **Making complete element look hovering**
You can make this whole element look hovering over the background, you just need to add one more shadow along with those three we added previously. In the new shadow we will increase the value of **blur-radius** to make it look hovering. But remember you have to keep its **spread-radius** at least equal to that of the previous one.

```CSS
box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828,
            0px 0px 50px 45px rgba(0,0,0,.5);
```

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

### **Creating steps effect**
You can create a steps effect using box-shadow, all you have to do is, as you know **spread-radius** supports negative value, so give negative value to the spread-radius of all shadows and add **horizontal offset** to it. Remember while adding horizontal offset at least give it positive value higher than the spread-radius if you want steps below the element or give it negative higher value than spread-radius if you want steps above the element.

```CSS
box-shadow: 
            0px 30px 0px -15px #fcbf49,
            0px 60px 0px -30px #f77f00,
            0px 90px 0px -45px #d62828;
```

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



### My favorite application of box-shadow is **Neumorphism** I haven't covered neumorphism in these 3 blogs to keep them short. Very soon I will be writing about **Neumorphism**. Until then you can check my pens at [CodePen](https://codepen.io/ritvikbunny) here I have some awesome work done with box-shadow and **Neumorphism**.

#### Thank you for reading, I hope you have also read the other two parts.
#### Please feel free to share your views and about some more cool things we can do with box-shadow.
#### 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)