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: #A93C3B 0%, #E1BB63 25%, #727272 50%, #98C379 75%, #D19275 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: #A93C3B 0%, #E1BB63 25%, #727272 50%, #98C379 75%, #D19275 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.