Gradient Animated Text

Create gradient animated text using HTML and TailwindCSS.

Demo

Lorem Ipsum Dolor Sit Amet

Consectetur Adipiscing Elit Sed Do Eiusmod

Code

1
<div class="w-full h-80 relative flex flex-col justify-center items-center">
2
  <h1 class="!text-2xl md:!text-3xl !font-semibold text-center">
3
    Lorem Ipsum Dolor Sit Amet
4
  </h1>
5
  <h1 class="!text-2xl md:!text-3xl !font-semibold text-center">
6
    Consectetur
7
    <span
8
      class="before:content-['Adipiscing_Elit_Sed_Do_Eiusmod'] before:absolute before:bg-clip-text before:text-transparent before:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] before:from-gray-300 before:via-fuchsia-600 before:to-orange-600"
9
      id="gradient-text"
10
    >
11
      Adipiscing Elit Sed Do Eiusmod
12
    </span>
13
  </h1>
14
  <button
15
    class="rounded px-4 py-2 bg-transparent border-2 border-current !mt-6 cursor-pointer hover:bg-gray-700 hover:text-white"
16
  >
17
    Learn More →
18
  </button>
19
</div>
20

21
<style>
22
  #gradient-text {
23
    --percent: 100%;
24
  }
25
  #gradient-text::before {
26
    clip-path: inset(0 var(--percent) 0 0);
27
  }
28
</style>
29

30
<script>
31
    document.addEventListener("scroll", () => {
32
      const delt_y = window.scrollY;
33
      const MAX_SCROLL_INTERVAL = 300;
34
      const percent =
35
        100 - Math.max(0, Math.min(100, (delt_y / MAX_SCROLL_INTERVAL) * 100));
36

37
      (document
38
        .querySelector("#gradient-text") as HTMLElement)
39
        .style.setProperty("--percent", `${percent}%`);
40
    });
41
</script>

Prerequisites

TailwindCSS is required to use the code snippet above.

Steps

Create an html skeleton as follows:

<div class="w-full h-80 relative flex flex-col justify-center items-center">
  <h1 class="!text-2xl md:!text-3xl !font-semibold text-center">
    Lorem Ipsum Dolor Sit Amet
  </h1>
  <h1 class="!text-2xl md:!text-3xl !font-semibold text-center">
    Consectetur
    <!-- Gradient text -->
    <span
      class=""
      id="gradient-text"
    >
      Adipiscing Elit Sed Do Eiusmod
    </span>
  </h1>
  <button
    class="rounded px-4 py-2 bg-transparent border-2 border-current !mt-6 cursor-pointer hover:bg-gray-700 hover:text-white"
  >
    Learn More →
  </button>
</div>

Choose your favorite gradient on hypercolor.dev and update the :before pseudo-element in our gradient text span:

<!-- Gradient text -->
<span
  class="before:content-['Adipiscing_Elit_Sed_Do_Eiusmod'] before:absolute before:bg-clip-text before:text-transparent before:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] before:from-gray-300 before:via-fuchsia-600 before:to-orange-600"
  id="gradient-text"
>
  Adipiscing Elit Sed Do Eiusmod
</span>

Take note that the content property in the :before pseudo-element should match the text content of the span element with spaces replaced by underscores.

Add the initial CSS styling for the gradient text:
```
#gradient-text {
  --percent: 100%;
}
#gradient-text::before {
  clip-path: inset(0 var(--percent) 0 0);
}
```
This is done in CSS instead of TailwindCSS to avoid inital flickering during page load. I haven’t found a way to do this in TailwindCSS yet, so if you know how, please let me know!

Create a script to animate the gradient text on scrolling:

document.addEventListener("scroll", () => {
  const delt_y = window.scrollY;
  // percent should go from 100% to 0% as we scroll down
  const MAX_SCROLL_INTERVAL = 300; // change this value to adjust the scroll interval
  const percent =
    100 - Math.max(0, Math.min(100, (delt_y / MAX_SCROLL_INTERVAL) * 100));

  document
    .querySelector("#gradient-text")
    .style.setProperty("--percent", `${percent}%`);
});

You should now have a eye-catching gradient animated text in your hero section.