Gradient text

The text fills with colors that flow slowly along it.

enhancer
gradient
loop
color
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Gradient text example

Color flows through the letters.

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-big"><span data-motion="gradient-text" data-colors="#f6a04d,#ff6b8b,#8a7dff">Color flows through the letters.</span></p>

import { GradientText } from "./motion/react/GradientText";

<GradientText>Your content</GradientText>

<script setup lang="ts">
import GradientText from "./motion/vue/GradientText.vue";
</script>

<template>
  <GradientText>Your content</GradientText>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "gradient-text";

The wrappers: GradientText.tsx (React, TypeScript) and GradientText.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-colors`	`#f6a04d,#ff6b8b,#8a7dff`	two or more colors, comma separated
`data-motion-speed`	`6`	seconds per loop

Pure CSS once started; paused off screen and in hidden tabs. Reduced motion: the gradient stays still.

Size

gradient-text.js is 0.5 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.