menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

shadow

MDUI provides 24 shadows with different depths, which can meet the needs of any scene in Material Design.

Related Reading

Material Design Guidelines: Levels & Shadows

Add shadow

Just add the class on the element .mdui-shadow-[1-24], The element will have a corresponding depth of shadow. Add class .mdui-shadow-0 You can remove the shadow.

Please drag the slider below to observe the changes of shadows at different depths.

1

Deepen the shadow when hovering

Add class to any element .mdui-hoverable, You can make the shadow darker when the mouse is hovering.

codeplay_arrow
Example
<div class="mdui-card mdui-hoverable">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

List of CSS class names

Class name effect
.mdui-shadow-0 Remove shadow
.mdui-shadow-[1-24] Add shadows of different depths
.mdui-hoverable Deepen the shadow when hovering
arrow_back Previous
Auxiliary class
arrow_forward Next
Ripple animation effect
Set document theme

Theme color

Main color

Accent color