Skip to content
Luna UI
gradient name-style text

Presets

Lost Fantasy
Embered
Lost Fantasy
Frostfire
Lost Fantasy
Goldenrod
Lost Fantasy
Voidshift
Lost Fantasy
Prismatic
Lost Fantasy
Burning
Lost Fantasy
Crowned

Customize

From Colors

2–8 hex colors, separated by commas. Add @0 to @100 for positions; 8 digits include alpha.

Font weight
Motion
Pulse

Preview

Lost Fantasy

Copy the code

<span class="tv-gradient-text" style="--tv-gradient-text-stops: #FFFBF7 0%, #F5F3DF 25%, #DEEBC5 50%, #9FD4C2 75%, #32C7D1 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>

<style>
.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; }
}
</style>
.my-gradient-text {
  --tv-gradient-text-stops: #FFFBF7 0%, #F5F3DF 25%, #DEEBC5 50%, #9FD4C2 75%, #32C7D1 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;
}

.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; }
}
Markdown for AI agents
Usage & credits
Use when
Player names, titles, short headings.
Avoid when
Body text or anything longer than a line.
Requires
Tailwind v4. No additional markup requirements.