Box Shadow in CSS (Part-1)
Tags: css, webdev, beginners
Published: 2020-09-08 16:11:42

When thinking of designing a website, the thing I'm always most excited about is using **box-shadow**. Box shadow seems to be a simple topic but actually it is a very vast topic. I will conclude it in 3 parts from 0 to best the I can. So this blog is about the basics of the **box-shadow**.

Let's understand what **box-shadow** actually do. In simple words box-shadow property adds the shadow effect to the border of the element, this element can be a **div**, a **button**, an **image** or any other element.
A box-shadow consists **X-offset** and **Y-offset** values of the shadow, blur-radius of the shadow, spread radius of the shadow and the color of the shadow.
```CSS
box-shadow: X-offset Y-offset blur-radius spread-radius color;
```
####**A single element can also have multiple shadows.**
**Remember you cannot use % values in box-shadows.**

#Let's understand each of them better :-
###**1. X-offset :-**
This is the horizontal offset of the shadow. The positive value of this offset means shadow will be formed in right of the element and negative value of this offset means shadow will be formed in left of the element. This value is not optional but you can pass zero value if you don't want to have a horizontal shadow.
###**2. Y-offset :-**
This is the vertical offset of the shadow. The positive value of this offset means shadow will be formed below the element and negative value of this offset means shadow will be formed above the element. This value is not optional but you can pass zero value if you don't want to have a vertical shadow.
###**3. Blur-radius :-**
This value manages the sharpness of the shadow formed. If it's value is zero then shadow will be sharpest and if it's value is higher the shadow will be more blurry. It's negative value is not accepted. This value is optional.
###**4. Spread-radius :-**
This value manages the size of the shadow. If you pass this value you will find that the size of the shadow increases according to the spread-radius that means it increases the spread of shadow. You can use the negative value to shrink the shadow. If spread radius is 0 ,i.e. no size has been defined for shadow then the shadow will be same size as that of blur radius. This value is optional.
###**5. Color :-**
This value let's you customize the color of the shadow. You can pass any color value or any name or any code or in any of the color unit. This value is optional.
**Tip :-** It's better to use **rgba()** unit so that you can define how transparent can be the color of the shadow.
###**Inset :-**
If you use inset keyword while defining the shadow measurements then the shadow will be made inside the element. Inset shadow are drawn inside the border of the frame and they are above the background. This value is optional.
##**Let's understand it better with examples-**
## # Using the positive offsets -
```CSS
box-shadow: 10px 10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/qBZxjdE %}
As you can see we have used positive **X-offset** and **Y-offset** so the shadow is formed in bottom and right of the **div**.
## # Using the negative offsets -
```CSS
box-shadow: -10px -10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/xxVYrQO %}
As you can see we have used the negative **X-offset** and **Y-offset** so the shadow is formed in top and left of the div.
## # Using the blur-radius -
```CSS
box-shadow: 10px 10px 10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/OJNQgMx %}
As you can see we have used the **blur-radius** which have made our shadow blur upto 10px. In the above examples we haven't used **blur-radius** so the shadows are very sharp.
## # Using the spread-radius -
```CSS
box-shadow: 10px 10px 0px 10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/QWNQgKB %}
As you can see we have used the **spread-radius** which have increased size of our shadow by **10px**. We can't use spread-radius without **blur-radius** so we have kept the value of **blur-radius 0**.
## # Using the color -
```CSS
box-shadow: 10px 10px blue;
```
{% codepen https://codepen.io/ritvikbunny/pen/LYNQLWN %}
As you can see the shadow is in blue color. We can use any color instead just by putting the color name or code or any other unit.
## # Using the inset -
```CSS
box-shadow: inset 10px 10px;
box-shadow: inset 10px 10px blue;
```
{% codepen https://codepen.io/ritvikbunny/pen/wvGyeqj %}
As you can see the shadow is formed over the **div** or you can say inside the **div**. It can also be given all the properties we have used in other examples.
## # Using multiple shadows -
```CSS
box-shadow: 10px 10px, -10px -10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/xxVYrWZ %}
As you can see there are two shadows formed here. For better differentiation there are two different colors given to the shadows.
     In the first shadow which is red, both the offsets are given positive values so the shadow is formed on top and right.
                                           In the second shadow which is blue, both the offsets are given negative values so the shadow is formed on top and left.
## # Using the shadow with border-radius -
```CSS
border-radius: 10px;
box-shadow: 10px 10px;
```
{% codepen https://codepen.io/ritvikbunny/pen/mdPXqmw %}
As you can see the shadow formed here has taken on those corner which are rounded by using **border-radius** property.

####**To learn more about box-shadow you can check the part-2 [here](https://dev.to/ritvikdubey27/box-shadow-in-css-part-2-1cgl).**
####**There is also the text-shadow property and drop-shadow we will discuss them in other parts.**
####**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)