Shadows

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.

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.

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:

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:

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.

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.

Get started

Elements

Options

Events

Theming

Guides

Layer 1: `appearance.shadowSize`

Layer 2: elevation scale

Layer 3: per-element overrides

Element-scoped shadows

Focus and error rings

See also

​Layer 1: appearance.shadowSize

​Layer 2: elevation scale

​Layer 3: per-element overrides

​Element-scoped shadows

​Focus and error rings

​See also

Layer 1: `appearance.shadowSize`

Layer 2: elevation scale

Layer 3: per-element overrides

Element-scoped shadows

Focus and error rings

See also