# Gradient text

Gradient\-filled text with optional glow and motion\.

- Kind: tool
- Category: text
- Default background: dark
- Use when: Player names, titles, short headings\.
- Avoid when: Body text or anything longer than a line\.
- Requires: None
- Kit: [Lost Fantasy](https://thuvien.org/ui/kits/lost-fantasy.md)
- Credit: [Lost Fantasy](https://lostfantasy.net)
- License: MIT

## Settings

| Parameter | Value |
| --- | --- |
| text | Lost Fantasy |
| stops | 2E4053@0,BFC9CA@25,AAB7B8@50,D5D8DC@75,F1C40F@100 |
| angle | 90 |
| weight | 700 |
| spread | 100 |
| glow\_color | 00000000 |
| glow\_blur | 0 |
| motion | none |
| motion\_duration | 4 |
| pulse | none |
| pulse\_duration | 3 |

## HTML

```html
<span class="tv-gradient-text" style="--tv-gradient-text-stops: #2E4053 0%, #BFC9CA 25%, #AAB7B8 50%, #D5D8DC 75%, #F1C40F 100%; --tv-gradient-text-angle: 90deg; --tv-gradient-text-weight: 700; --tv-gradient-text-spread: 100%; --tv-gradient-text-glow-color: #00000000; --tv-gradient-text-glow-blur: 0px;">Lost Fantasy</span>
```

## CSS

```css
.tv-gradient-text {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  background-image: linear-gradient(
    var(--tv-gradient-text-angle, 90deg),
    var(--tv-gradient-text-stops, #fdba74 0%, #f97316 50%, #dc2626 100%)
  );
  background-size: var(--tv-gradient-text-spread, 100%) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--tv-gradient-text-weight, 700);
  filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 0px) var(--tv-gradient-text-glow-color, transparent));
  animation: var(--tv-gradient-text-motion, none), var(--tv-gradient-text-pulse, none);
}

@keyframes tv-gradient-text-slide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes tv-gradient-text-sweep {
  to { background-position: var(--tv-gradient-text-spread, 100%) 50%; }
}

@keyframes tv-gradient-text-soft {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ffffff66)); }
  50% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 2) var(--tv-gradient-text-glow-color, #ffffff66)); }
}

@keyframes tv-gradient-text-flicker {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ef44448c)); }
  45% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 1.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
  70% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 0.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
}

@media (prefers-reduced-motion: reduce) {
  .tv-gradient-text { animation: none; }
}
```

## Params

| Parameter | Type | Default | Range or options |
| --- | --- | --- | --- |
| text | text | Lost Fantasy | Maximum 40 characters |
| stops | stops | FDBA74@0,F97316@50,DC2626@100 | 2 to 8 colors, optional positions 0 to 100 |
| angle | range | 90 | 0 to 360; step 1 |
| weight | select | 700 | 400, 600, 700, 800 |
| spread | range | 100 | 100 to 300; step 10 |
| glow\_color | color | 00000000 |  |
| glow\_blur | range | 0 | 0 to 12; step 1 |
| motion | select | none | none, slide, sweep |
| motion\_duration | range | 4 | 1 to 10; step 0\.1 |
| pulse | select | none | none, soft, flicker |
| pulse\_duration | range | 3 | 1 to 10; step 0\.1 |

## Presets

- [Embered](https://thuvien.org/ui/tools/gradient-text?preset=embered)
- [Frostfire](https://thuvien.org/ui/tools/gradient-text?preset=frostfire)
- [Goldenrod](https://thuvien.org/ui/tools/gradient-text?preset=goldenrod)
- [Voidshift](https://thuvien.org/ui/tools/gradient-text?preset=voidshift)
- [Prismatic](https://thuvien.org/ui/tools/gradient-text?preset=prismatic)
- [Burning](https://thuvien.org/ui/tools/gradient-text?preset=burning)
- [Crowned](https://thuvien.org/ui/tools/gradient-text?preset=crowned)