> 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-3.0/sds-core/styles/shadows.md).

# Shadows

Shadows can be used to add depth and provide a light source to interfaces, making them engaging and overall more realistic. SDS Core contains three base shadow styles to allow for a variety of depth and dimension in projects.

<figure><img src="/files/4TKJtfRa41dA0ci9Cb2E" alt="Sipster shadow style options."><figcaption></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Shadow Name</th><th>Shadow Properties</th></tr></thead><tbody><tr><td>0</td><td><code>box-shadow: none</code></td></tr><tr><td>sm</td><td><code>box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);</code></td></tr><tr><td>md</td><td><code>box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04), 0px 12px 16px -2px rgba(0, 0, 0, 0.12);</code></td></tr><tr><td>lg</td><td><code>box-shadow: 0px 24px 48px 0px rgba(0, 0, 0, 0.24)</code></td></tr></tbody></table>

***

## Applying Shadows

Applying shadows is fairly straightforward in both design and development.

### Design: Figma Library

Shadows are available in the SDS Core Figma library as Effect styles. Simply select the layer/group etc and apply as needed.

<figure><img src="/files/yalJ0mInS8JL3i0lkbD8" alt="" width="232"><figcaption></figcaption></figure>

### Development: SCSS Shadow Mixin

To streamline adding shadow styles for developers, Sipster provides a custom mixin: `@include sds-shadow()`.

This mixin accepts a $value (shadow name) and returns the preformatted properties for each shadow variant listed above.

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

Because this is a custom mixin, it needs to be implemented at the same level as other properties for a CSS selector using `@include`.

#### Example:

```scss
.sds_Card {
  @include sds-shadow(sm);
}

.sds_Tooltip {
  @include sds-typeset(md);
}

.sds_Alert {
  @include sds-typeset(lg);
}
```

#### Compiled CSS:

{% code fullWidth="false" %}

```css
.sds_Card {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.sds_Tooltip {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04), 0px 12px 16px -2px rgba(0, 0, 0, 0.12);
}

.sds_Alert {
  box-shadow: 0px 24px 48px 0px rgba(0, 0, 0, 0.24)
}
```

{% endcode %}