Pular para o conteúdo

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.

boxShadow: 0
boxShadow: 1
boxShadow: 2
boxShadow: 3
<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