Shadows

Add or remove shadows to elements with box-shadow utilities.

Example

The helpers allow you to control relative depth, or distance, between two surfaces along the z-axis. By default, there are 25 elevation levels.

boxShadow: 0

boxShadow: 1

boxShadow: 2

boxShadow: 3

import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';

export default function ShadowsDemo() {
  return (
    <Grid container>
      <Box
        sx={(theme) => ({
          boxShadow: 0,
          width: '8rem',
          height: '5rem',
          bgcolor: '#fff',
          color: 'grey.800',
          p: 1,
          m: 1,
          borderRadius: 2,
          textAlign: 'center',
          fontSize: '0.875rem',
          fontWeight: '700',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
          }),
        })}
      >
        boxShadow: 0
      </Box>
      <Box
        sx={(theme) => ({
          boxShadow: 1,
          width: '8rem',
          height: '5rem',
          bgcolor: '#fff',
          color: 'grey.800',
          p: 1,
          m: 1,
          borderRadius: 2,
          textAlign: 'center',
          fontSize: '0.875rem',
          fontWeight: '700',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
          }),
        })}
      >
        boxShadow: 1
      </Box>
      <Box
        sx={(theme) => ({
          boxShadow: 2,
          width: '8rem',
          height: '5rem',
          bgcolor: '#fff',
          color: 'grey.800',
          p: 1,
          m: 1,
          borderRadius: 2,
          textAlign: 'center',
          fontSize: '0.875rem',
          fontWeight: '700',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
          }),
        })}
      >
        boxShadow: 2
      </Box>
      <Box
        sx={(theme) => ({
          boxShadow: 3,
          width: '8rem',
          height: '5rem',
          bgcolor: '#fff',
          color: 'grey.800',
          p: 1,
          m: 1,
          borderRadius: 2,
          textAlign: 'center',
          fontSize: '0.875rem',
          fontWeight: '700',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
          }),
        })}
      >
        boxShadow: 3
      </Box>
    </Grid>
  );
}

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

API

import { shadows } from '@mui/system';

Import name	Prop	CSS property	Theme key
`boxShadow`	`boxShadow`	`box-shadow`	`shadows`