# Box shadow

> Utilities for controlling the box shadow of an element.

Source: https://www.zenplates.co/documentation/utilities/box-shadow (Utilities › Effects)

Shadows simulate height above the surface of an interface and can be used to create a layering effect.

| Class             | Properties                   |
| ----------------- | ---------------------------- |
| `.shadow`         | `@include shadow();`         |
| `.shadow-xs`      | `@include shadow-xs();`      |
| `.shadow-sm`      | `@include shadow-sm();`      |
| `.shadow-md`      | `@include shadow-md();`      |
| `.shadow-lg`      | `@include shadow-lg();`      |
| `.shadow-xl`      | `@include shadow-xl();`      |
| `.shadow-solid`   | `@include shadow-solid();`   |
| `.shadow-inner`   | `@include shadow-inner();`   |
| `.shadow-outline` | `@include shadow-outline();` |
| `.shadow-none`    | `box-shadow: none;`          |

## Usage

### Outer shadow

Use the `.shadow`, `.shadow-xs`, `.shadow-sm`, `.shadow-md`, `.shadow-lg` or `.shadow-xl` utilities to apply different sized outer box shadows to an element.

```html
<div class="shadow-xs"></div>
<div class="shadow-sm"></div>
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>
```

Use `.shadow-solid` to apply a solid shadow to an element.

```html
<div class="shadow-solid"></div>
```

### Inner shadow

Use `.shadow-inner` to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

```html
<div class="shadow-inner"></div>
```

### Outline

Use `.shadow-outline` to apply a focus-ring-style shadow to an element.

```html
<button class="button button-primary">Unfocused</button>
<button class="button button-primary shadow-outline">Focused</button>
```

### No shadow

Use `.shadow-none` to remove an existing box shadow from an element.

## Variants

By default, both responsive and hover-state variants are generated for box-shadow utilities.

### Responsive

To control the box shadow for an element at a specific breakpoint, add a `{screen}:` prefix to any existing box shadow utility.

For example, use `.md:shadow-md` to apply the `shadow-md` utility at only medium screen sizes and above.

### Hover-state

To control the box shadow for an element's hover state, add a `hover:` prefix to any existing box shadow utility.

For example, use `.hover:shadow-md` to apply the `shadow-md` utility when the element's hover state is active.