JSX style props for styling box shadows, opacity, and more
Use the shadow or boxShadow prop to apply a box shadow to an element.
// hardcoded values<Box shadow="12px 12px 2px 1px rgba(0, 0, 255, .2)" />
// token values<Box shadow="lg" />| Prop | CSS Property | Token Category |
|---|---|---|
shadows, boxShadow | box-shadow | shadows |
shadowColor | --shadow-color | colors |
Use the shadowColor prop to set the color of a box shadow. This prop maps to
the --shadow-color CSS variable.
<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />| Prop | CSS Property | Token Category |
|---|---|---|
shadowColor | --shadow-color | colors |
Use the opacity prop to set the opacity of an element.
<Box opacity="0.5" />| Prop | CSS Property | Token Category |
|---|---|---|
opacity | opacity | opacity |
Use the mixBlendMode prop to control how an element's content should be
blended with the background.
<Box bg="danger.bg.initial"> <Image src="..." mixBlendMode="hard-light" /></Box>| Prop | CSS Property | Token Category |
|---|---|---|
mixBlendMode | mix-blend-mode | - |
On this page