Sombras

Adicione ou remova sombras dos elementos usando os utilitários box-shadow.

Exemplo

Os utilitários permitem que você controle a profundidade ou distância relativa entre duas superfícies ao longo do eixo z. Por padrão, há 25 níveis de elevação.

<Box sx={{ boxShadow: 0 }}>…
<Box sx={{ boxShadow: 1 }}>…
<Box sx={{ boxShadow: 2 }}>…
<Box sx={{ boxShadow: 0 }}>…
<Box sx={{ boxShadow: 1 }}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 3 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…

API

import { shadows } from '@material-ui/system';

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
`boxShadow`	`boxShadow`	`box-shadow`	`shadows`