# Shadow.

#### Elevation Level: 3.

##### Soft Positive.

`@include sbb.shadow-level-3-soft;`

##### Hard Positive.

`@include sbb.shadow-level-3-hard;`

##### Soft Negative.

`@include sbb.shadow-level-3-soft-negative;`

##### Hard Negative.

`@include sbb.shadow-level-3-hard-negative;`

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-shadow-elevation-level-3-shadow-1-offset-x` |  |
| `--sbb-shadow-elevation-level-3-shadow-1-offset-y` |  |
| `--sbb-shadow-elevation-level-3-shadow-1-blur` |  |
| `--sbb-shadow-elevation-level-3-shadow-1-spread` |  |
| `--sbb-shadow-elevation-level-3-shadow-2-offset-x` |  |
| `--sbb-shadow-elevation-level-3-shadow-2-offset-y` |  |
| `--sbb-shadow-elevation-level-3-shadow-2-blur` |  |
| `--sbb-shadow-elevation-level-3-shadow-2-spread` |  |

#### Elevation Level: 5.

##### Soft Positive.

`@include sbb.shadow-level-5-soft;`

##### Hard Positive.

`@include sbb.shadow-level-5-hard;`

##### Soft Negative.

`@include sbb.shadow-level-5-soft-negative;`

##### Hard Negative.

`@include sbb.shadow-level-5-hard-negative;`

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-shadow-elevation-level-5-shadow-1-offset-x` |  |
| `--sbb-shadow-elevation-level-5-shadow-1-offset-y` |  |
| `--sbb-shadow-elevation-level-5-shadow-1-blur` |  |
| `--sbb-shadow-elevation-level-5-shadow-1-spread` |  |
| `--sbb-shadow-elevation-level-5-shadow-2-offset-x` |  |
| `--sbb-shadow-elevation-level-5-shadow-2-offset-y` |  |
| `--sbb-shadow-elevation-level-5-shadow-2-blur` |  |
| `--sbb-shadow-elevation-level-5-shadow-2-spread` |  |

#### Elevation Level: 9.

##### Soft Positive.

`@include sbb.shadow-level-9-soft;`

##### Hard Positive.

`@include sbb.shadow-level-9-hard;`

##### Soft Negative.

`@include sbb.shadow-level-9-soft-negative;`

##### Hard Negative.

`@include sbb.shadow-level-9-hard-negative;`

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-shadow-elevation-level-9-shadow-1-offset-x` |  |
| `--sbb-shadow-elevation-level-9-shadow-1-offset-y` |  |
| `--sbb-shadow-elevation-level-9-shadow-1-blur` |  |
| `--sbb-shadow-elevation-level-9-shadow-1-spread` |  |
| `--sbb-shadow-elevation-level-9-shadow-2-offset-x` |  |
| `--sbb-shadow-elevation-level-9-shadow-2-offset-y` |  |
| `--sbb-shadow-elevation-level-9-shadow-2-blur` |  |
| `--sbb-shadow-elevation-level-9-shadow-2-spread` |  |

#### Elevation Level: 11.

##### Soft Positive.

`@include sbb.shadow-level-11-soft;`

##### Hard Positive.

`@include sbb.shadow-level-11-hard;`

##### Soft Negative.

`@include sbb.shadow-level-11-soft-negative;`

##### Hard Negative.

`@include sbb.shadow-level-11-hard-negative;`

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-shadow-elevation-level-11-shadow-1-offset-x` |  |
| `--sbb-shadow-elevation-level-11-shadow-1-offset-y` |  |
| `--sbb-shadow-elevation-level-11-shadow-1-blur` |  |
| `--sbb-shadow-elevation-level-11-shadow-1-spread` |  |
| `--sbb-shadow-elevation-level-11-shadow-2-offset-x` |  |
| `--sbb-shadow-elevation-level-11-shadow-2-offset-y` |  |
| `--sbb-shadow-elevation-level-11-shadow-2-blur` |  |
| `--sbb-shadow-elevation-level-11-shadow-2-spread` |  |

---

Source: https://digital.sbb.ch/en/design-system/lyne/design-tokens/shadow/