Box shadows

Atomic classes for managing an element’s box-shadow properties.

Classes

🔗
Class CSS Responsiveness
.bs-none box-shadow: none; Y
.bs-sm box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05); Y
.bs-md box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09); Y
.bs-lg box-shadow: box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13); Y
.bs-xl box-shadow: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1); Y

Customization

CSS Variables (Runtime)

Box shadows are exposed as CSS custom properties:

:root {
  --bs-none: none;
  --bs-sm: 0 1px 2px hsla(0deg, 0%, 0%, 0.05), ...;
  --bs-md: 0 1px 3px hsla(0deg, 0%, 0%, 0.06), ...;
  --bs-lg: 0 1px 4px hsla(0deg, 0%, 0%, 0.09), ...;
  --bs-xl: 0 10px 24px hsla(0deg, 0%, 0%, 0.05), ...;
}

/* Use in custom components */
.my-card {
  box-shadow: var(--bs-md);
}

SCSS Variables (Build-time)

Override SCSS variables before importing:

@use "@enodo/foundation-css" with (
  $box-shadows: (
    none: none,
    sm: (0 1px 2px rgba(0, 0, 0, 0.05)),
    md: (0 2px 4px rgba(0, 0, 0, 0.1)),
    // ... customize as needed
  )
);