Animated Gradient Text

RzAnimatedGradientText applies an animated linear gradient fill to inline text. The component is SSR-only, CSS-driven, and requires no Blazor interactivity or Alpine integration. It works well for highlighting labels, headings, callouts, and marketing-style inline copy.

Basic Usage

The default configuration uses a warm orange-to-purple animated gradient and only requires child content.

Source

<RzAnimatedGradientText class="text-2xl font-semibold">
    Bring emphasis to any message.
</RzAnimatedGradientText>

Custom Colors and Speed

Tune animation width and gradient colors using Speed, ColorFrom, and ColorTo.

Source

<RzAnimatedGradientText Speed="2"
                        ColorFrom="#4ade80"
                        ColorTo="#06b6d4"
                        class="text-3xl font-bold">
    High-contrast custom gradient
</RzAnimatedGradientText>

Inline Composition Example

Because the default element is span, this component composes naturally with other inline UI.

Source

<div class="group relative mx-auto flex items-center justify-center rounded-full border px-4 py-1.5">
    <span class="absolute inset-0 block h-full w-full rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]" />
    🎉 <hr class="mx-2 h-4 w-px shrink-0 bg-muted-foreground" />
    <RzAnimatedGradientText class="text-sm font-medium">Introducing RizzyUI</RzAnimatedGradientText>
    <Blazicon Svg="MdiIcon.ChevronRight" class="ml-1 size-4 text-muted-foreground" />
</div>

Static Gradient Mode

Set Animate to false to keep the gradient styling without motion.

Source

<RzAnimatedGradientText class="text-xl font-semibold">Animated gradient</RzAnimatedGradientText>
<RzAnimatedGradientText Animate="false" class="text-xl font-semibold">Static gradient</RzAnimatedGradientText>

Element and Attribute Pass-through

You can override the root element and pass additional semantics like title, lang, and custom classes.

Source

<RzAnimatedGradientText Id="gradient-title"
                        Element="strong"
                        title="Localized attention text"
                        lang="en"
                        class="tracking-wide uppercase text-lg">
    Accessibility-friendly emphasized text
</RzAnimatedGradientText>

Component Parameters

Property	Description	Type	Default
`ChildContent`	Inline content rendered with gradient styles.	`RenderFragment?`	`null`
`Speed`	Animation width/speed multiplier. Values less than or equal to zero are clamped to `0.1`.	`decimal`	`1`
`ColorFrom`	Gradient start and end color custom property value.	`string`	`#ffaa40`
`ColorTo`	Gradient middle color custom property value.	`string`	`#9c40ff`
`Animate`	Enables or disables gradient animation.	`bool`	`true`
`Element`	Inherited root element override. Defaults to `span`.	`string?`	`span`
`Id`	Inherited component identifier applied to the root element.	`string`	`auto-generated`

Alpine API

Not applicable. RzAnimatedGradientText is CSS-only and does not emit Alpine directives or JavaScript hooks.