Skip to main content

Shadow

É um dos elementos que ajudam a trabalhar a hierarquia visual e trazer destaque para os elementos na interface.

TokenLayer 1Layer 2ColorOpacity
shadow-noneX:0, Y:0, Blur: 0---
shadow-smX: 0, Y: 1px, Blur: 4pxX: 0, Y: 0, Blur: 3px#0000000.1
shadow-mdX: 0, Y: 4px, Blur: 8pxX: 0, Y: 0, Blur: 3px#0000000.1
shadow-lgX: 0, Y: 6px, Blur: 12pxX: 0, Y: 0, Blur: 3px#0000000.1
shadow-xlX: 0, Y: 16px, Blur: 24pxX: 0, Y: 0, Blur: 3px#0000000.1

Obs: As cores e opacidades são iguais para ambas camadas.

Exemplo das variações de sombra, mostrando as diferentes elevações