Background Clip
Set background clipping area
Syntax
visual="bg-clip:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
border | background-clip: border-box | Clip to border |
padding | background-clip: padding-box | Clip to padding |
content | background-clip: content-box | Clip to content |
text | background-clip: text; -webkit-background-clip: text | Clip to text |
Examples
html
<div visual="bg-clip:text text:transparent bg:gradient">Gradient text</div>Preview
Background Clip
visual="bg-clip:text" - Clip background to text for gradient text effect
Gradient Text
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<span text="size:large weight:bold" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 bg-clip:text text:transparent">Gradient Text</span>
</div>