> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Shadows

> Elevation layers for inputs and buttons across three composable tiers.

Shadow tokens compose across three layers. Start with the top-level preset for a quick lift, redefine the elevation scale to repaint the palette, and reach for per-element overrides when a single element needs different chrome.

## Layer 1: `appearance.shadowSize`

Top-level preset. One knob lifts every input and the submit button onto a step of the elevation scale.

```javascript theme={null}
new Overflow('live_pub_...', {
  appearance: {
    shadowSize: 'md', // 'sm' | 'md' | 'lg'. Omit for flat (default).
  },
});
```

| `shadowSize`      | Input shadow       | Button shadow      |
| ----------------- | ------------------ | ------------------ |
| omitted (default) | `none`             | `none`             |
| `'sm'`            | `var(--shadow-sm)` | `var(--shadow-sm)` |
| `'md'`            | `var(--shadow-sm)` | `var(--shadow-md)` |
| `'lg'`            | `var(--shadow-md)` | `var(--shadow-lg)` |

Independent of `appearance.size`; `{ size: 'large', shadowSize: 'sm' }` is a valid combo.

## Layer 2: elevation scale

`shadowSm`, `shadowMd`, and `shadowLg` variables define what the `'sm'`, `'md'`, and `'lg'` steps mean. Override them to repaint the entire palette; every consumer (the `shadowSize` preset, per-element tokens, utility classes) picks up the new values automatically.

| Token      | Default                                                              |
| ---------- | -------------------------------------------------------------------- |
| `shadowSm` | `0 1px 2px 0 rgb(0 0 0 / 5%)`                                        |
| `shadowMd` | `0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%)`   |
| `shadowLg` | `0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%)` |

Each accepts a full CSS `box-shadow` string (one or more comma-separated layers) or a `var(--your-css-var)` reference.

```javascript theme={null}
new Overflow('live_pub_...', {
  appearance: {
    variables: {
      shadowMd: '0 6px 12px -2px rgb(0 0 0 / 18%)',
    },
    shadowSize: 'md',
  },
});
```

## Layer 3: per-element overrides

Tune shadows on inputs and buttons independently.

| Token               | Default                               | Description                                                             |
| ------------------- | ------------------------------------- | ----------------------------------------------------------------------- |
| `inputShadow`       | resolved by `shadowSize`, else `none` | Ambient elevation under every native input and the secured card fields. |
| `buttonShadow`      | resolved by `shadowSize`, else `none` | Submit button elevation at rest.                                        |
| `buttonShadowHover` | falls back to `buttonShadow`          | Submit button elevation on hover.                                       |

Each accepts:

```typescript theme={null}
type ShadowValue =
  | 'none' | 'sm' | 'md' | 'lg'      // enum (most common)
  | `var(--${string})`               // CSS variable reference
  | string;                          // literal box-shadow escape hatch
```

Per-element overrides win over the `shadowSize` preset. Use this to opt a single element out of a global preset, or to ramp the CTA on hover:

```javascript theme={null}
new Overflow('live_pub_...', {
  appearance: {
    shadowSize: 'md', // Every input and button gets shadow-md...
    variables: {
      buttonShadow: 'none', // ...except keep the CTA flat.
    },
  },
});
```

## Element-scoped shadows

Each element's `appearance` layers on top of the instance-level shadow configuration for free. See [Element-scoped overrides](/payment-elements/theming/element-scoped-overrides).

```javascript theme={null}
overflow.bank({
  appearance: {
    variables: { inputShadow: 'lg' },
  },
}).mount('#bank');
```

## Focus and error rings

Every input applies `box-shadow: var(--input-shadow)` at rest. Focus and error states use comma-composed multi-shadow: the ambient elevation stacks under the focus or error ring, so both layers render cleanly. When `inputShadow` resolves to `none`, only the ring renders.

## See also

* [Token reference](/payment-elements/theming/token-reference)
* [Element-scoped overrides](/payment-elements/theming/element-scoped-overrides)