Shadow

Shadows help to highlight and create a sense of depth in interfaces.

For elements that are not experiencing any kind of interaction, prefer smaller shadows by default, they are closer to the virtual surface, so they look "sit" and still then. Interactions like hover, drag & drop or dialog overlays are good opportunities to go with bigger shadows.

Usage#

xs
sm
Base
md
lg
xl
2xl
Dark lg
Outline
Inner
Editable Example

Text#

Text with shadows

Editable Example
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows
Edit this page

Made byChakraandRock Content