ZUI — Shadows

Scale

--shadow-smSmall

--shadowDefault

--shadow-mdMedium

--shadow-lgLarge

--shadow-xlExtra large

--shadow-2xl2× 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);
}