Gradient Text
Inline text wrapper that applies gradient fills to text declaratively.
<arc-gradient-text>Overview
GradientText wraps any inline text in a gradient fill using background-clip: text, giving headings, labels, and hero copy color transitions without manual CSS. Choose from the built-in variants (accent, the standard blue-to-violet; display, the display heading gradient; sunset; and ocean) or supply a fully custom CSS gradient string via the gradient prop.
The component is fully inline and inherits the parent's font size, weight, and line height, so it can be dropped into any typographic context (a heading, a paragraph, a button label) without breaking layout. A subtle drop-shadow glow is applied by default using var(--accent-primary-rgb).
Set animated to enable a smooth background-position cycle that shifts the gradient back and forth. The animation respects prefers-reduced-motion and disables itself automatically for users who prefer no motion. The text CSS part allows external overrides for filters, opacity, or additional styling.
Guidelines
When to use
- Use GradientText for hero headings, feature labels, and marketing copy
- Pair with large font sizes (24px+) where gradient fills are most visible
- Use the accent variant for UI elements that should match the brand palette
- Use the custom variant to match campaign-specific or one-off color schemes
- Prefer the display variant for page headings and section titles
When not to use
- Do not use GradientText for body copy or long paragraphs. Gradients lose impact at small sizes
- Do not animate every gradient on the page. Reserve animation for a single focal element
- Do not use the sunset or ocean variants in contexts that need to match the brand accent tokens
- Do not nest GradientText inside another GradientText. Only the innermost gradient will be visible
Features
- Five built-in gradient variants: accent, display, sunset, ocean, and custom
- Custom gradient support. Pass any CSS gradient string via the gradient prop
- Optional gradient animation with automatic `prefers-reduced-motion` handling
- Fully inline: inherits parent font-size, weight, and line-height
- Subtle accent glow via drop-shadow filter
- CSS ::part(text) exposed for external styling overrides
- Token-driven accent and display gradients cascade with theme overrides
Preview
Usage
Gradient Text is in the marketing domain group, so it is absent from the default @arclux/arc-ui barrel. Import it from@arclux/arc-ui/marketing, or from its own subpath@arclux/arc-ui/gradient-text. Everything else (the element, the CSS, the framework wrappers, the support it gets) is unchanged.
<arc-gradient-text variant="accent">Accent Gradient</arc-gradient-text>
<!-- Display heading gradient -->
<arc-gradient-text variant="display">Display Gradient</arc-gradient-text>
<!-- Sunset variant -->
<arc-gradient-text variant="sunset">Sunset Gradient</arc-gradient-text>
<!-- Ocean variant -->
<arc-gradient-text variant="ocean">Ocean Gradient</arc-gradient-text>
<!-- Custom gradient -->
<arc-gradient-text variant="custom" gradient="linear-gradient(90deg, #e66465, #9198e5)">
Custom Gradient
</arc-gradient-text>
<!-- Animated -->
<arc-gradient-text variant="accent" animated>Animated Gradient</arc-gradient-text>import { GradientText } from '@arclux/arc-ui-react';
function HeroHeading() {
return (
<h1 style={{ fontSize: '48px', fontWeight: 700 }}>
<GradientText variant="accent" animated>
Build Something Beautiful
</GradientText>
</h1>
);
}
// Custom gradient
<GradientText variant="custom" gradient="linear-gradient(90deg, #e66465, #9198e5)">
Custom Colors
</GradientText><script setup>
import { GradientText } from '@arclux/arc-ui-vue';
</script>
<template>
<h1 style="font-size: 48px; font-weight: 700">
<GradientText variant="accent" animated>
Build Something Beautiful
</GradientText>
</h1>
</template><script>
import { GradientText } from '@arclux/arc-ui-svelte';
</script>
<h1 style="font-size: 48px; font-weight: 700">
<GradientText variant="accent" animated>
Build Something Beautiful
</GradientText>
</h1>import { Component } from '@angular/core';
import { GradientText } from '@arclux/arc-ui-angular';
@Component({
imports: [GradientText],
template: `
<h1 style="font-size: 48px; font-weight: 700">
<arc-gradient-text variant="accent" animated>
Build Something Beautiful
</arc-gradient-text>
</h1>
`,
})
export class HeroComponent {}import { GradientText } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<h1 style={{ 'font-size': '48px', 'font-weight': 700 }}>
<GradientText variant="accent" animated>
Build Something Beautiful
</GradientText>
</h1>
);
}import { GradientText } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<h1 style={{ fontSize: '48px', fontWeight: 700 }}>
<GradientText variant="accent" animated>
Build Something Beautiful
</GradientText>
</h1>
);
}API
gradientstring''- Custom CSS gradient string, used when variant is set to custom
variant'accent' | 'display' | 'sunset' | 'ocean' | 'custom''accent'- Predefined gradient variant to apply
animatedbooleanfalse- Animate the gradient with a shifting background-position cycle