# Box Shadow

Set the box shadow for an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 10 · Edge 12 · Firefox 4 · Safari 5.1

| Class | Properties | Value |
|-------|------------|-------|
| `bs-o:none` | box-shadow | `none` |
| `bs-o:xs` | box-shadow | `0 1px 2px #0000000d` |
| `bs-o:sm` | box-shadow | `0 1px 3px #0000001a, 0 1px 2px -1px #0000001a` |
| `bs-o:md` | box-shadow | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` |
| `bs-o:lg` | box-shadow | `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` |
| `bs-o:xl` | box-shadow | `0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a` |
| `bs-o:xxl` | box-shadow | `0 25px 50px -12px #00000040` |
| `bs-o:3xl` | box-shadow | `0 35px 60px -15px #0000004d` |

| Class | Properties | Value |
|-------|------------|-------|
| `bs-i:none` | box-shadow | `none` |
| `bs-i:xs` | box-shadow | `inset 0 1px 2px #0000000d` |
| `bs-i:sm` | box-shadow | `inset 0 2px 4px #0000000f` |
| `bs-i:md` | box-shadow | `inset 0 2px 4px #0000001a` |
| `bs-i:lg` | box-shadow | `inset 0 4px 6px #0000001a` |
| `bs-i:xl` | box-shadow | `inset 0 6px 10px #0000001f` |
| `bs-i:xxl` | box-shadow | `inset 0 8px 16px #00000026` |
| `bs-i:3xl` | box-shadow | `inset 0 12px 24px #00000033` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

#### Outset

| Class | Properties | Value |
|-------|------------|-------|
| `bs-o:none` | box-shadow | `none` |
| `bs-o:xs` | box-shadow | `0 1px 2px #0000000d` |
| `bs-o:sm` | box-shadow | `0 1px 3px #0000001a, 0 1px 2px -1px #0000001a` |
| `bs-o:md` | box-shadow | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` |
| `bs-o:lg` | box-shadow | `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` |
| `bs-o:xl` | box-shadow | `0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a` |
| `bs-o:xxl` | box-shadow | `0 25px 50px -12px #00000040` |
| `bs-o:3xl` | box-shadow | `0 35px 60px -15px #0000004d` |

#### Inset

| Class | Properties | Value |
|-------|------------|-------|
| `bs-i:none` | box-shadow | `none` |
| `bs-i:xs` | box-shadow | `inset 0 1px 2px #0000000d` |
| `bs-i:sm` | box-shadow | `inset 0 2px 4px #0000000f` |
| `bs-i:md` | box-shadow | `inset 0 2px 4px #0000001a` |
| `bs-i:lg` | box-shadow | `inset 0 4px 6px #0000001a` |
| `bs-i:xl` | box-shadow | `inset 0 6px 10px #0000001f` |
| `bs-i:xxl` | box-shadow | `inset 0 8px 16px #00000026` |
| `bs-i:3xl` | box-shadow | `inset 0 12px 24px #00000033` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

#### Outset

| Class | Properties | Value |
|-------|------------|-------|
| `bs-o:none` | box-shadow | `none` |
| `bs-o:xs` | box-shadow | `0 1px 2px #0000000d` |
| `bs-o:sm` | box-shadow | `0 1px 3px #0000001a, 0 1px 2px -1px #0000001a` |
| `bs-o:md` | box-shadow | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` |
| `bs-o:lg` | box-shadow | `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` |
| `bs-o:xl` | box-shadow | `0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a` |
| `bs-o:xxl` | box-shadow | `0 25px 50px -12px #00000040` |
| `bs-o:3xl` | box-shadow | `0 35px 60px -15px #0000004d` |

#### Inset

| Class | Properties | Value |
|-------|------------|-------|
| `bs-i:none` | box-shadow | `none` |
| `bs-i:xs` | box-shadow | `inset 0 1px 2px #0000000d` |
| `bs-i:sm` | box-shadow | `inset 0 2px 4px #0000000f` |
| `bs-i:md` | box-shadow | `inset 0 2px 4px #0000001a` |
| `bs-i:lg` | box-shadow | `inset 0 4px 6px #0000001a` |
| `bs-i:xl` | box-shadow | `inset 0 6px 10px #0000001f` |
| `bs-i:xxl` | box-shadow | `inset 0 8px 16px #00000026` |
| `bs-i:3xl` | box-shadow | `inset 0 12px 24px #00000033` |