Gradient From
Tetapkan warna mula gradien
Sintaks
visual="from:[color]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
primary | --tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) | Mula dari utama |
blue-500 | --tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) | Mula dari biru |
Contoh
html
<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</div>Pratonton
Mula Gradien
visual="from:blue-500" - Tetapkan warna permulaan gradien
from:blue-500 to:purple-500
from:emerald-500 to:blue-500
Lihat Kod
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>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div visual="gradient:[custom-value]">Custom</div>