Shadows

const Card = props => (
  <Flex
    size="60px"
    bg="white"
    borderRadius="4px"
    alignItems="center"
    justifyContent="center"
    {...props}
  />
);
render(
  <Flex backgroundColor="#edf2f7" padding="10px" justifyContent="space-between">
    <Card boxShadow="base">base</Card>
    <Card boxShadow="md">md</Card>
    <Card boxShadow="lg">lg</Card>
    <Card boxShadow="xl">xl</Card>
    <Card boxShadow="2xl">2xl</Card>
    <Card boxShadow="inner">inner</Card>
    <Card boxShadow="outline">outline</Card>
    <Card boxShadow="none">none</Card>
  </Flex>
);

Shorthand Props

const Card = props => (
  <Flex
    size="60px"
    bg="white"
    borderRadius="4px"
    alignItems="center"
    justifyContent="center"
    {...props}
  />
);
render(
  <Flex backgroundColor="#edf2f7" padding="10px" justifyContent="space-between">
    <Card shadow="base">base</Card>
  </Flex>
);
KeyCSS ValueExample
base
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
sm
0 1px 2px 0 rgba(0,0,0,.05)
md
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
lg
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
xl
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
2xl
0 25px 50px -12px rgba(0, 0, 0, 0.25)
inner
inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)
outline
0 0 0 3px rgba(66, 153, 225, 0.5)
none
none