Shadows

Use sparingly

Shadow Scale

shadow-sm Subtle, inputs

shadow-md Cards, dropdowns

shadow-lg Modals, popovers

shadow-xl Dramatic emphasis

Values

--sw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--sw-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.05);
--sw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
--sw-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);

Usage

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

.my-modal {
  box-shadow: var(--sw-shadow-lg);
}