Box Shadow
Add box shadow
Syntax
visual="shadow:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | box-shadow: var(--shadow-none) | No shadow |
small | box-shadow: var(--shadow-small) | Small shadow |
medium | box-shadow: var(--shadow-medium) | Medium shadow |
big | box-shadow: var(--shadow-big) | Large shadow |
giant | box-shadow: var(--shadow-giant) | Giant shadow |
Examples
html
<div visual="shadow:medium">Card with shadow</div>Preview
Box Shadow
visual="shadow:medium" - Add elevation with shadows from subtle to dramatic
small
medium
big
View Code
html
<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
</div>Notes
TIP
Tailwind Scale Support
Use tw- prefix to access Tailwind shadow scale: shadow:tw-md, shadow:tw-lg, shadow:tw-xl