Apply CSS Box Shadow the right way + FREE Resources
Tags: css, beginners, webdev, javascript
Published: 2021-10-24 10:58:45

Hello my wonderful friend, welcome to this tutorial!
Today, I'll be explaining CSS Box Shadow and I will also be sharing different cool resources that will help you add box shadow to elements on your website in no time!

Stick with me till the end! 🍻

<img src="https://media.giphy.com/media/11sBLVxNs7v6WA/giphy.gif" alt="CSS Box Shadow Tutorial"/> 

## What exactly is Box Shadow?
[Box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) is a CSS property that adds shadow effects around an element's frame, and you can set multiple effects separated by commas.

Here is the syntax:
```
box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
```

> Box Shadow takes all other measurement types except for percentages %

## What exactly do each of these box shadow effects mean?
### 1. Inset: 
This is an optional keyword. The presence of the inset keyword changes the shadow direction to be inside the frame, instead of its default outward appearance.

![CSS Box Shadow - Inset Box Shadow Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a74o9l3el49o59s5xa9j.png)


### 2. Horizontal Offset:
This represents the shadow on the right of the element. When it is positive, it means the shadow will be on the right of the box, while a negative value will put the shadow on the left of the box. It is compulsory. 

>The image below shows the effect of the horizontal offset (30px) and the inset property. 
Notice that the inset property changes the direction of the box-shadow just like the negative horizontal offset.

![CSS Box Shadow - Horizontal Offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82vo04np0re64zxuhxwt.png)

### 3. Vertical Offset:
This represents the shadow at the bottom of the element. When it is positive, it means the shadow will be at the bottom, while a negative value will put the shadow on top of the box. It is also a compulsory value.

> Here is an another example similar to Horizontal offset


![CSS Box Shadow - Vertical Offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qb7dlq2xa1nlu18ejqo.png)


### 4. Blur Radius:
This adds some opacity to the color of the shadow. The default value is zero. If set to 0 or not specified, the shadow will be sharp. The higher the number or value, the more blurred it will be. It is optional.

![CSS Box Shadow - Blur Radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7phbqr01qvizwcfeysgp.png)

### 5. Spread Radius:
This determines the size of the shadow. The larger the value, the larger the shadow. Also, where its length ends is where the blur begins. Positive values increase the size of the shadow, negative values decrease the size. Its default value is 0 (same size as blur radius).

![CSS Box Shadow - Spread Radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wfw4sphewy4lk9n7xlv.png)

Let's check out some use cases of CSS Box Shadow

## Interesting Box Shadow Examples on Codepen 🚀

{% codepen https://codepen.io/Robinskie/pen/LYjYgzB %}

{% codepen https://codepen.io/bsmith/pen/bfqJc %}

{% codepen https://codepen.io/sdthornton/pen/wBZdXq %}

{% codepen https://codepen.io/kosta-labial/pen/VwbNVxp %}

{% codepen https://codepen.io/haibnu/pen/FxGsI %}

{% codepen https://codepen.io/ovdojoey/pen/BomKyZ %}

{% codepen https://codepen.io/gillytech/pen/dlbsx %}

{% codepen https://codepen.io/olam/pen/zcqea %}

{% codepen https://codepen.io/TLJens/pen/RPWBvY %}


## 💯 FREE Resources to get Up & Running with CSS Box Shadow 🚀 
1. [Neumorphism](https://neumorphism.io/#e0e0e0)
2. [Box Shadow Art](https://box-shadow.art/)
3.  [Box Shadow CSS Generator](https://cssgenerator.org/box-shadow-css-generator.html)
4. [Box Shadow](https://box-shadow.dev/)

Thank you for reading till the end.

Feel free to follow for more interesting and educative posts and  also Connect with me on
🚀 [Linkedin](https://www.linkedin.com/in/david-asaolu234/)
🚀 [Twitter](https://twitter.com/Arshadayvid)

<img src="https://media.giphy.com/media/osjgQPWRx3cac/giphy.gif" alt="CSS Box Shadow Giphy"/>