Gilt Component
Text gradient color effect using CSS variables and layered linear-gradient. Supports dynamic colors, direction modifiers, spotlight and duotone variants.
Notes
- Base class:
.gilt. Uses --color-primary as gradient primary and currentColor as secondary by default.
- Directions:
.gilt-start (left→right, default), .gilt-end (right→left), .gilt-top (top→bottom), .gilt-bottom (bottom→top).
- Variants:
.gilt-spotlight (color converges in middle), .gilt-duotone (shifts second color hue by 40°).
- Color:
gilt-* dynamic utilities (e.g. gilt-primary, gilt-error, gilt-pink-500, gilt-[#ff6600]).
- Gilt works with any text color — the
currentColor value in the gradient inherits from the element's text color (color property). Just set style="color: ..." or use text-* utilities.
Basic usage
Default gilt
Gradient text
Font sizes
Small
Medium
Large
Paragraph text
This is a paragraph with gilt gradient effect. The gradient can be applied to text of any length.
Theme colors
Primary
Secondary
Tertiary
Success
Error
Info
Warning
Caution
Highlight
Title
Directions
.gilt-start (left→right, default)
Start
.gilt-end (right→left)
End
.gilt-top (top→bottom)
Top
.gilt-bottom (bottom→top)
Bottom
Variants
.gilt-spotlight
Spotlight
Spotlight End
.gilt-duotone
Duotone
Duotone End
Spotlight + colors
Success
Error
Info
Duotone + colors
Success
Error
Info
Combinations
Success + Bottom + Spotlight
Error + End + Duotone
Info + Top + Spotlight
Warning + Start + Duotone
Text color override
Red text color
Orange text color + duotone
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Hex value
#ff6600
Named color
blue
Tailwind color
pink-500
Custom + spotlight
#ff6600 spotlight