Utilities - Shadows
Shadow Utilities
Add or remove shadows to elements with box-shadow utilities.
Use the shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl utilities to apply different sized outer box shadows to an element.
| Class |
Properties |
shadow |
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06) !important; |
shadow-md |
box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) !important; |
shadow-lg |
box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05) !important; |
shadow-xl |
box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04) !important; |
shadow-2xl |
box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important; |
shadow-inner |
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.06) !important; |
shadow-none |
box-shadow: none !important; |