Blueprint

GuidesFoundationComponentsReleases
⌘K

Shadows

A set of shadow presets are available to be applied to any system component via the shadow or boxShadow style prop.


<Box shadow="default">Shadow Box</Box>

Shadow

Standard shadows used to create the appearance of depth or layers.

live

function Shadows() {
const Shadow = props => (
<Panel as={Center} height="600" {...props}>
<Code size={400}>{props.shadow}</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Shadow shadow="default" />
</Stack>
);
}

Inset

Inset shadows are the inverse of distance, for creating an inlay effect.

live

function Insets() {
const Inset = props => (
<Panel as={Center} height="600" {...props}>
<Code size={400}>{props.shadow}</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Inset shadow="inset100" />
<Inset shadow="inset200" />
</Stack>
);
}

Halo

Border effects applied via CSS box-shadow to prevent affecting the dimensions of a container. These are usually used to indicate focus or selection.

live

function Halos() {
const Halo = ({ shadow, colorScheme }) => (
<Panel shadow={shadow} as={Center} height="600">
<Code colorScheme={colorScheme} size={400}>
{shadow}
</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Halo shadow="haloNeutral" colorScheme="neutral" />
<Halo shadow="haloPrimary" colorScheme="primary" />
<Halo shadow="haloDanger" colorScheme="danger" />
<Halo shadow="haloWarning" colorScheme="warning" />
<Halo shadow="haloSuccess" colorScheme="success" />
</Stack>
);
}

Ring

Similar to Halo above, but thinner.

live

function Rings() {
const Ring = ({ shadow, colorScheme }) => (
<Panel shadow={shadow} as={Center} height="600">
<Code colorScheme={colorScheme} size={400}>
{shadow}
</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Ring shadow="ringNeutral" colorScheme="neutral" />
<Ring shadow="ringPrimary" colorScheme="primary" />
</Stack>
);
}

Legacy

Deprecated

These shadows are deprecated in favor of a singular default. They will likely be removed in a future version.

live

function Shadows() {
const Shadow = props => (
<Panel as={Center} height="600" {...props}>
<Code size={400}>{props.shadow}</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Shadow shadow="distance100" />
<Shadow shadow="distance200" />
<Shadow shadow="distance300" />
<Shadow shadow="distance400" />
<Shadow shadow="distance500" />
<Shadow shadow="distance600" />
</Stack>
);
}