Shadows

Preview

base

md

lg

xl

2xl

inner

outline

none

Source

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> )

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

Preview

base

Source

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> )

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>
)

Key	CSS Value	Example
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