Shadows

Shadows can also be used to create a sense of hierarchy in a design. They create depth, contrast, and visual interest, and can greatly enhance the overall user experience.

CSS Variables

:root {
  --shadow-xs: 0px 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0px 4px 8px rgba(0, 0, 0, 0.125);
  --shadow-md: 0px 8px 16px rgba(0, 0, 0, 0.125);
  --shadow-lg: 0px 16px 32px rgba(0, 0, 0, 0.125);
  }