005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
690 B
690 B
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.
{{"demo": "ShadowsDemo.js", "defaultCodeOpen": false, "bg": true}}
<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 |