# Sombras

<p class="description">Adicione ou remova sombras dos elementos usando os utilitários box-shadow.</p>

## 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.

{{"demo": "pages/system/shadows/Demo.js", "defaultCodeOpen": false, "bg": true}}

```jsx
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
```

## API

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

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