Shadows

Box shadow tokens using oklch relative colour syntax. The shadow colour is configurable via --shadow-color.

Scale

--shadow-sm Small

--shadow Default

--shadow-md Medium

--shadow-lg Large

--shadow-xl Extra large

--shadow-2xl 2× large

Customising shadow colour

Override --shadow-color in your theme to tint all shadows. It defaults to a neutral near-black (oklch(0.2 0 0)) and is overridden to --color-sky-600 in the default theme.

:root {
  /* Neutral shadows */
  --shadow-color: oklch(0.2 0 0);

  /* Tinted shadows */
  --shadow-color: var(--color-indigo-600);
}

Usage

.card {
  box-shadow: var(--shadow-md);
}

.modal {
  box-shadow: var(--shadow-xl);
}