Gradient From
Set gradient start color
Syntax
visual="from:[color]/[opacity]"Values
| Value | CSS Output | Description |
|---|---|---|
primary | --tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) | Start from primary |
blue-500 | --tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) | Start from blue |
Examples
html
<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</div>Preview
Gradient From
visual="from:blue-500" - Set the starting color of a gradient
from:blue-500 to:purple-500
from:emerald-500 to:blue-500
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
<div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="gradient:[custom-value]">Custom</div>