O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Sombra

mdui fornece 24 profundidades diferentes de sombras, que podem atender às necessidades de qualquer cenário no Material Design.

Leitura relacionada

Diretrizes de design do Material Design: Elevação e sombras

Adicionar sombra

Basta adicionar a classe .mdui-shadow-[1-24] ao elemento, e o elemento terá a profundidade de sombra correspondente. Adicionar a classe .mdui-shadow-0 remove a sombra.

Arraste o slider abaixo para observar as mudanças nas sombras de diferentes profundidades.

Aumentar a sombra ao passar o mouse

Adicione a classe .mdui-hoverable a qualquer elemento para aumentar a sombra ao passar o mouse.

Exemplo

<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>

Lista de classes CSS

Nome da classe	Descrição
`.mdui-shadow-0`	Remover sombra
`.mdui-shadow-[1-24]`	Adicionar sombras de diferentes profundidades
`.mdui-hoverable`	Aumentar a sombra ao passar o mouse

Classes auxiliares

Efeito ripple