Text Shadow
Add text shadow
Syntax
visual="text-shadow:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | text-shadow: none | No shadow |
small | text-shadow: 0 1px 2px rgba(0,0,0,0.1) | Small shadow |
medium | text-shadow: 0 2px 4px rgba(0,0,0,0.1) | Medium shadow |
big | text-shadow: 0 4px 8px rgba(0,0,0,0.1) | Large shadow |
Examples
html
<h1 visual="text-shadow:medium">Shadowed heading</h1>Preview
Text Shadow
visual="text-shadow:medium" - Add shadow to text
none
small
medium
big
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
<div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
<div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
<div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="text:[custom-value]">Custom</div>