CSS Box-shadow: There Is Something in the Shadow
Tags: css, webdesign
Published: 2018-07-12 07:46:07

---
title: CSS Box-shadow: There Is Something in the Shadow
published: true
description: In this post, you can read about the non-so-unfamiliar property and all its options.
tags: CSS, web design.
---

The box-shadow property is used to add a shadow effect to an element.

This is property is used quite often to **give depth to elements** on a website, so it is useful to fully understand it. 

##The Syntax

The syntax for the box-shadow property is the following:

```
.box {
  box-shadow: 5px 10px 5px 4px #666;
}
```

Let’s translate this so you can understand what each of the values means:

```
box-shadow: horizontal offset | vertical offset | blur radius | spread radius (optional) | color 
```

##Values

* **Horizontal offset** - how far to the left or right will the shadow spread (if the value is positive it will spread to the right, if it is negative it will go to the left),
* **Vertical offset** - how far above or below the element will the shadow spread (if the value is positive it will spread to the bottom, if it is negative it will go to the top),
* **Blur radius** - the higher the number, the more blurred the shadow will be, if the number is 0 it will be sharp,
* **Spread radius** - the default value is 0, the higher the number the bigger the shadow size will be,
* **Color** - defines the color of the shadow.


##Examples

CSS

```
.box {
  background-color: hotpink;
  height: 200px;
  width: 200px;

  box-shadow: 5px 5px 10px 4px rgba(0,0,0,0.5);
}
```

The result:

![box_shadow_1](https://kolosek.com/content/images/2018/05/box_shadow_1.png)

Usually, there is no need for using a solid color for a box shadow, adding some opacity gives it a more natural feel.


###Inset Shadow

When creating an inset shadow, the resulting effect is the shadow goes inside the element and makes the content look depressed inside the element.

CSS

```
.box {
  background-color: yellow;
  height: 200px;
  width: 200px;

  box-shadow: inset 5px 5px 10px 4px rgba(0,0,0,0.5);
}
```

![box_shadow_2](https://kolosek.com/content/images/2018/05/box_shadow_2.png)

###Two Different Shadows

You can also create an element that has two different shadows, width different colors. 

CSS

```
.box {
  background-color: orange;
  height: 200px;
  width: 200px;

  box-shadow: 5px 5px 10px purple, -7px -4px 4px green;
}
```

![box_shadow_3](https://kolosek.com/content/images/2018/05/box_shadow_3.png)


###Solid Shadow

CSS

```
.box {
  background-color: #999;
  border: solid 3px #000;
  height: 200px;
  width: 200px;

  box-shadow: 5rem -20px red;
}
```

![box_shadow_4](https://kolosek.com/content/images/2018/05/box_shadow_4.png)

From this example, you can see that the use of a solid shadow is good, but usually giving it some spread and opacity results in a far better effect.

##Box Shadow Generators

Now that you have understood the property, and seen it in action, it is a good idea to mention that there are also a lot of **generators** you can use. It can often be quite difficult translating the design imagined into the box-shadow property values, so there are tools that can help you.

You can use [CSS matic](https://www.cssmatic.com/box-shadow), [CSS3 Gen](https://css3gen.com/box-shadow/), [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator) box-shadow generator. All of these help you visually achieve the box shadow effect you want.

##Browser Compatibility

As mentioned in one of my previous articles, it is a good practice to check the browser compatibility of new properties you are learning. Currently, the best service to use is the [CanIUse](https://caniuse.com/). 

![box_shadow_use-1](https://kolosek.com/content/images/2018/05/box_shadow_use-1.png)


As you can see, the browser support is very good, except when using **Opera Mini**. You should be aware that this feature won’t work there. 

##Conclusion

I explained the **box-shadow property** and what all of its values stand for. Now, it’s up to you to further explore and unlock its full potential.

Thank you for reading!

Do you need a hand with CSS and web design? [Send us a message](https://kolosek.com/contact/) and Kolosek team will look it up!

This post is originally published at [Kolosek Blog](https://kolosek.com/unlocking-css-box-shadow/?utm_source=dvt).