Shadows
Add or remove shadows to elements with box-shadow utilities.
Overview
Vue MDBootstrap shadows is an effect used in web elements which provides important visual cues about objects depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow.
Creating shadows with Vue MDBootstrap is very easy. You only need to add one of the shadow classes to the chosen element.
| Class | Styles |
|---|---|
| md-shadow | box-shadow: 0 1px 2px 0 oklch(0.369 0.007 240.019 / 0.35), 0 1px 4px 3px oklch(0.369 0.007 240.019 / 0.05); |
| md-shadow-0 | box-shadow: none; |
| md-shadow-1 | box-shadow: 0 5px 11px 0 oklch(0 0 0 / 0.12), 0 4px 15px 0 oklch(0 0 0 / 0.1); |
| md-shadow-2 | box-shadow: 0 8px 17px 0 oklch(0 0 0 / 0.12), 0 6px 20px 0 oklch(0 0 0 / 0.1); |
| md-shadow-3 | box-shadow: 0 12px 15px 0 oklch(0 0 0 / 0.1), 0 17px 50px 0 oklch(0 0 0 / 0.1); |
| md-shadow-4 | box-shadow: 0 16px 28px 0 oklch(0 0 0 / 0.15), 0 25px 55px 0 oklch(0 0 0 / 0.1); |
| md-shadow-5 | box-shadow: 0 15px 30px 6px oklch(0% 0 0deg / 0.1), 0 20px 50px 15px oklch(0 0 0 / 0.1); |
Examples
md-shadow
md-shadow-1
md-shadow-2
md-shadow-3
md-shadow-4
md-shadow-5
Bootstrap Shadows
If shadows provided by Vue MDBootstrap still not enough, you can still use shadows utilities provided by Bootstrap.
Small shadow
Default shadow
Large shadow
Shadow on Hover
hover me!