CSS box-shadow
Tags: css, beginners, boxshadow
Published: 2020-09-13 05:22:16

While spending occassional weekends on building frontend projects. Everytime I start building the UI among all other things I visit W3Schools or MDN, I definitely refer `box-shadow`. So I thought of sharing what I learnt recently.

## First the Basics

### Syntax

>> box-shadow: inset(**opt**) x-offset(**req**) y-offset(**req**) blur-radius(**opt**) spread-radius(**opt**) color(**opt**);

>> Definitions are already available in MDN so I am not repeating here, & infact MDN/W3S are best for web dev references, I cant do any better.

## Use Case 1:
In this example I am only using blur radius parameter. Use blur-radius to create a blur effect, but if you want a solid shadow use spread-radius instead (use case 2).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g0g41225zts8lu475bv1.png)

```css
.shadow-1{
    box-shadow: 0 0 10px;
}
```


## Use Case 2:

In this example I am going to use only spread radius. Use spread radius only, creates a outline like effect around the container. Ofcourse we can use outline instead, but this is an alternative to outline.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9sw6p6vv1jkfscbkwkqu.png)

```css
.shadow-4{
    box-shadow: 0 0 0 4px rgb(64,74,87);
}
```

>> Pro Tip: You can ignore the rgb color above .shadow-4 class and system will use the font color to create the shadow. This applies to all cases.

## Use Case 3:

I guess we can now shift our focus to the first 2 parameters x-offset & y-offset.

```css
.shadow-5{
    box-shadow: 4px 0;
}
```
As you can see we only get a shadow on the x-axis we only added a positive `x-offset` value of 4px. Even though `y-offset` is `0` we still have to write as it is a required parameter.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8rex3te1s227hppdvj8d.png)

Now lets try `y-offset` only & as expected-
```css
.shadow-5{
    box-shadow: 0 4px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vuhkd9428nbfi35jpv1h.png)

Lets try x & y offset together-
```css
.shadow-5{
    box-shadow: 4px 4px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y0ftoq828avyc26boi6e.png)

## Use Case 4:

By now I hope the 4 parameters(x,y,blur,spread) make some sense when we using individually. Now lets combine everything together and see what we get.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k4yivycibnm73poip3gt.png)

A few more basics to go...

## Use Case 5:

Another interesting usage of box-shadow is to create multiple layers. We can display multiple layers of shadows using comma separated list of box shadow values.

```css
.shadow-8{
    box-shadow: 0 0 0 14px rgb(64,74,87),
                0 0 0 28px rgb(56, 250, 82),
                0 0 0 42px rgb(56, 179, 250);
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sr6hfale81znhszgiwse.png)

## Use case 6:

The next property is the usage of `inset` keyword. Until now we have noticed usage of **box-shadow** for generating shadow outside the target element. Using `inset` keyword we can alter the direction of the shadow inward.
```css
.shadow-9{
    box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.5);  
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1tzupqg8yog6i11pfkdt.png)

## Blur vs Spread

When I was implementing `box-shadow` I really got confused between blur and spread radius. From use case 1 & 2 you can see that using spread radius generates a solid structure where as blur radius creates a blur.

You can use blur or spread separately or use them together. 

```css
.shadow-10{
    box-shadow: 0 0 4px 4px ;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i5odbnfn1nhb2odoscr4.png)

Thats all for now. The quest for knowledge must never end. Keep learning ✌

Banner image by [Céline Martin](https://pixabay.com/users/CJMM-12470662/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4200027) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=4200027)