Gradient Text

`<pura-gradient-text>` fills the slotted text with a multicolor gradient that flows continuously across the letters, aurora style, in the spirit of React Bits' Gradient Text, Magic UI's Aurora Text and Aceternity's Colourful Text. The fill is a wide `linear-gradient` clipped to the glyphs with `background-clip: text`, and `background-position` loops in a seamless pure CSS `@keyframes`, so it works server-rendered with no client JS. It is distinct from `<pura-text-shimmer>`, which sweeps a single highlight band over a base color. Set the palette with `colors`, the direction with `angle`, and the speed with `duration` (or the `--pura-gradient-text-*` tokens, including a full `--pura-gradient-text-gradient` override). Under reduced motion the flow stops and the text keeps a static multicolor fill. The slotted text stays accessible as plain text. Each instance registers in `window.__puraGradientTexts` by `data-pura-id`.

Preview

<pura-gradient-text style="font: 800 40px system-ui;">Aurora headline</pura-gradient-text>

<!-- Custom palette, direction and speed -->
<pura-gradient-text colors="#f59e0b, #ef4444, #ec4899, #f59e0b" angle="135deg" duration="5">
  Sunset flow
</pura-gradient-text>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/gradient-text.js"></script>

import "./pura/lib/gradient-text.js";