Animated Gradient Text

An animated gradient background which transitions between colors for text.

🎉

---

Introducing Spark UI

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import ArrowRight from "@/components/icons/arrow-right.vue";
import AnimatedGradientText from "@/components/animated-gradient-text/animated-gradient-text.vue";
import { cn } from "@/libs/utils";
</script>

<template>
  <div class="grid place-items-center min-h-screen w-full">
    <AnimatedGradientText>
      🎉
      <hr class="mx-2 h-4 w-px shrink-0 bg-gray-300" />
      <span
        :class="
          cn(
            `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
          )
        "
      >
        Introducing Spark UI
      </span>
      <ArrowRight
        class="ml-1 size-3 transition-transform w-5 h-5 text-white duration-300 ease-in-out group-hover:translate-x-0.5"
      />
    </AnimatedGradientText>
  </div>
</template>

## Props | Prop | Type | Description | Default | | --------- | ------ |
-------------------------------------- | ------- | | children | | The children passed into the
component | | | className | string | The class name to be applied. | |

Installation

Copy and paste the following code into your project:

animated-gradient-text.vue

<script setup lang="ts">
import { cn } from "@/lib/utils";

interface AnimatedGradientText {
  class?: string;
}

const props = defineProps<AnimatedGradientText>();

const className = cn(
  "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
  props.class,
);
</script>

<template>
  <div :class="className">
    <div
      class="absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]"
    />

    <slot />
  </div>
</template>

Update your tailwind.config.js file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        gradient: "gradient 8s linear infinite",
      },
      keyframes: {
        gradient: {
          to: {
            backgroundPosition: "var(--bg-size) 0",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Description	Default
class	string	The class to be applied.	""