Skip to content


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


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
<Box sx={{ boxShadow: 0 }}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box sx={{ boxShadow: 3 }}>


import { shadows } from '@mui/system';
Import name Prop CSS property Theme key
boxShadow boxShadow box-shadow shadows