> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-core/sds-tools/styles/shadows.md).

# Shadows

Mixin for applying shadows to elements.

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)` |