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.

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!