# Elevation

Shadows from Figma effect styles, plus blur, opacity, border-width and focus tokens.

| Name | CSS var | Tailwind | Light | Dark | Description |
| --- | --- | --- | --- | --- | --- |
| --blur-16 | `--blur-16` |  | `16px` | `16px` | Raw value. Use a semantic token instead. |
| --blur-32 | `--blur-32` |  | `32px` | `32px` | Raw value. Use a semantic token instead. |
| --blur-8 | `--blur-8` |  | `8px` | `8px` | Raw value. Use a semantic token instead. |
| --blur-lg | `--blur-lg` | `blur-lg` | `32px` | `32px` | Heavy blur for modal scrims and hero backdrops. |
| --blur-md | `--blur-md` | `blur-md` | `16px` | `16px` | Standard glass surface blur. |
| --blur-sm | `--blur-sm` | `blur-sm` | `8px` | `8px` | Subtle backdrop blur for translucent chrome. |
| --border-width-0 | `--border-width-0` |  | `0px` | `0px` | 0px stroke. Primitive — alias via a semantic token. |
| --border-width-1 | `--border-width-1` |  | `1px` | `1px` | 1px stroke. Primitive — alias via a semantic token. |
| --border-width-2 | `--border-width-2` |  | `2px` | `2px` | 2px stroke. Primitive — alias via a semantic token. |
| --border-width-4 | `--border-width-4` |  | `4px` | `4px` | 4px stroke. Primitive — alias via a semantic token. |
| --border-width-medium | `--border-width-medium` |  | `2px` | `2px` | 2px border for selected or emphasised states. |
| --border-width-none | `--border-width-none` |  | `0px` | `0px` | No border. |
| --border-width-thick | `--border-width-thick` |  | `4px` | `4px` | 4px border for heavy emphasis. |
| --border-width-thin | `--border-width-thin` |  | `1px` | `1px` | Default 1px border for cards, inputs and dividers. |
| --focus-ring-width | `--focus-ring-width` |  | `2px` | `2px` | Focus ring thickness. Pair with color/border/focus and focus/ring-offset. |
| --opacity-0 | `--opacity-0` |  | `0` | `0` | 0% opacity step. Primitive. |
| --opacity-100 | `--opacity-100` |  | `1` | `1` | 100% opacity step. Primitive. |
| --opacity-16 | `--opacity-16` |  | `0.16` | `0.16` | 16% opacity step. Primitive. |
| --opacity-24 | `--opacity-24` |  | `0.24` | `0.24` | 24% opacity step. Primitive. |
| --opacity-40 | `--opacity-40` |  | `0.4` | `0.4` | 40% opacity step. Primitive. |
| --opacity-56 | `--opacity-56` |  | `0.56` | `0.56` | 56% opacity step. Primitive. |
| --opacity-72 | `--opacity-72` |  | `0.72` | `0.72` | 72% opacity step. Primitive. |
| --opacity-8 | `--opacity-8` |  | `0.08` | `0.08` | 8% opacity step. Primitive. |
| --opacity-88 | `--opacity-88` |  | `0.88` | `0.88` | 88% opacity step. Primitive. |
| --shadow-elevation-0 | `--shadow-elevation-0` |  | `0 0 0 0 #00000000` | `0 0 0 0 #00000000` | Effect style elevation/0. |
| --shadow-elevation-inner | `--shadow-elevation-inner` | `shadow-elevation-inner` | `inset 0 2px 4px 0 #00000014` | `inset 0 2px 4px 0 #00000014` | Effect style elevation/inner. |
| --shadow-focus-ring | `--shadow-focus-ring` | `shadow-focus-ring` | `0 0 0 2px #ffffff, 0 0 0 4px #25a156` | `0 0 0 2px #ffffff, 0 0 0 4px #25a156` | Effect style focus/ring. |
| --shadow-lg | `--shadow-lg` | `shadow-lg` | `0 12px 32px -8px #0b120d33` | `0 12px 32px -8px #0b120d33` | Effect style shadow/lg. |
| --shadow-md | `--shadow-md` | `shadow-md` | `0 6px 16px -4px #0b120d1f` | `0 6px 16px -4px #0b120d1f` | Effect style shadow/md. |
| --shadow-sm | `--shadow-sm` | `shadow-sm` | `0 2px 6px -1px #0b120d14` | `0 2px 6px -1px #0b120d14` | Effect style shadow/sm. |
| --shadow-xl | `--shadow-xl` | `shadow-xl` | `0 24px 56px -12px #0b120d40` | `0 24px 56px -12px #0b120d40` | Effect style shadow/xl. |
| --shadow-xs | `--shadow-xs` | `shadow-xs` | `0 1px 2px 0 #0b120d0f, 0 1px 1px 0 #0b120d08` | `0 1px 2px 0 #0b120d0f, 0 1px 1px 0 #0b120d08` | Effect style shadow/xs. |