bg-clip-border/padding/content/text — where the background paints. This family contains 4 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
bg-clip-border | background-clip: border-box; |
bg-clip-padding | background-clip: padding-box; |
bg-clip-content | background-clip: content-box; |
bg-clip-text | background-clip: text; |
Example#
example
<p class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-600">Clipped</p>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- bg-clip-text powers gradient text
Related#
utilities/backgrounds/gradients|Gradients · colors/index|Colors