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/ArrowRight.vue'
import AnimatedGradientText from '@/components/animatedGradientText/animatedGradientText.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:

AnimatedGradientText.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.	""