Box Shadow Utility
# Intro
The box shadow utility controls the box shadow of an element.
| Class | Properties |
|---|---|
| --shadow | box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14) , 0px 3px 1px -2px rgba(0,0,0,0.12) , 0px 1px 5px 0px rgba(0,0,0,0.2); |
| --shadow-md | box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.14) , 0px 1px 10px 0px rgba(0,0,0,0.12) , 0px 2px 4px -1px rgba(0,0,0,0.2); |
| --shadow-lg | box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2); |
| --shadow-xl | box-shadow: 0px 16px 24px 2px rgba(0,0,0,0.14) , 0px 6px 30px 5px rgba(0,0,0,0.12) , 0px 8px 10px -7px rgba(0,0,0,0.2); |
| --shadow-2xl | box-shadow: 0px 24px 38px 3px rgba(0,0,0,0.14) , 0px 9px 46px 8px rgba(0,0,0,0.12) , 0px 11px 15px -7px rgba(0,0,0,0.2); |
| --shadow-inner | box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.12), inset 0px 0px 6px 6px rgba(0, 0, 0, 0.12); |
| --shadow-flat | box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2), 6px 6px 0px 0px rgba(0,0,0,0.2); |
| --shadow-outline | box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); |
| --shadow-outline-primary | box-shadow: 0 0 0 2px #0074d9; |
| --shadow-outline-success | box-shadow: 0 0 0 2px #22d290; |
| --shadow-outline-warning | box-shadow: 0 0 0 2px #ffcc1a; |
| --shadow-outline-danger | box-shadow: 0 0 0 2px #eb544b; |
| --shadow-outline-dark | box-shadow: 0 0 0 2px #1e1e1e; |
| --shadow-outline-light | box-shadow: 0 0 0 2px #fff; |
| --shadow-none | box-shadow: none; |