Inner Shadow (Inset) Tokens — Pressed and Recessed UI Effects

Inner Shadow Token Design

Inner shadows (CSS inset box-shadow) create the illusion of recessed or pressed surfaces. They complement elevation shadows by providing the opposite depth direction.

Common Inner Shadow Tokens

:root {
  --shadows-inner-sm: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadows-inner-md: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadows-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

Use Cases by Component

Input Fields: A subtle inner shadow gives inputs a recessed appearance:

.input {
  box-shadow: var(--shadows-inner-sm);
}

Pressed Buttons: Active state uses inner shadow to simulate physical pressing:

.button:active {
  box-shadow: var(--shadows-inner-md);
  transform: translateY(1px);
}

Recessed Panels: Code blocks or sidebar areas can use inner shadows:

.code-block {
  box-shadow: var(--shadows-inner-lg);
  background-color: var(--colors-surface);
}

Combining Inner and Outer Shadows

CSS allows multiple box-shadow values, so you can combine inner and outer shadows:

.card-with-depth {
  box-shadow: var(--shadows-sm), var(--shadows-inner-sm);
}

Colored Inner Shadows

For focus states or branded inputs, use colored inner shadows:

:root {
  --shadows-inner-focus: inset 0 0 0 2px rgba(59, 130, 246, 0.3);
  --shadows-inner-error: inset 0 0 0 2px rgba(239, 68, 68, 0.3);
}

Neumorphism

Neumorphic design relies heavily on inner shadows paired with outer shadows on the same element to create a soft, extruded appearance. While trendy, ensure sufficient contrast for accessibility.