Gradient Text

Inline text wrapper that applies gradient fills to text declaratively.

Components

Gradient Text

typography

static

<arc-gradient-text>

Overview

GradientText wraps any inline text in a gradient fill using `background-clip: text`, giving headings, labels, and hero copy vivid color transitions without manual CSS. Choose from 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)` for a polished look. 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 for polished presentation
CSS ::part(text) exposed for external styling overrides
Token-driven accent and display gradients cascade with theme overrides

Preview

Accent Gradient

Display Gradient

Sunset Gradient

Ocean Gradient

Animated Gradient

Usage

<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

variant 'accent' | 'display' | 'sunset' | 'ocean' | 'custom' ='accent': Predefined gradient variant to apply
gradient string ='': Custom CSS gradient string, used when variant is set to custom
animated boolean =false: Animate the gradient with a shifting background-position cycle

Gradient Text

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight