# Shadows

Shadow implementation is a very commonly used property in 2600Hz's project mockups, because it generates better contrast between elements or giving a 3D effect to overlaid elements. Given how often it's used, Sipster-Core offers a mixin to facilitate the shadows' implementation in different levels:

```scss
@include sds-shadow("value");
```

For this mixin to work, replace the "value" param in the mixin using the following table:

| Value | CSS Value                                       |
| ----- | ----------------------------------------------- |
| 0     | `box-shadow: none`                              |
| 1     | `box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16)`   |
| 2     | `box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.24)`  |
| 3     | `box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.32)` |
