Gradient Text — ARC UI

Components

Gradient Text

typography

static

<arc-gradient-text>

Overview

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

Use GradientText for body copy or long paragraphs — gradients lose impact at small sizes
Animate every gradient on the page — reserve animation for a single focal element
Use the sunset or ocean variants in contexts that need to match the brand accent tokens
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" animate>Animated Gradient</arc-gradient-text>

import { GradientText } from '@arclux/arc-ui-react';

function HeroHeading() {
  return (
    <h1 style={{ fontSize: '48px', fontWeight: 700 }}>
      <GradientText variant="accent" animate>
        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" animate>
      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" animate>
    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">
      <GradientText variant="accent" animate>
        Build Something Beautiful
      </GradientText>
    </h1>
  `,
})
export class HeroComponent {}

import { GradientText } from '@arclux/arc-ui-solid';

<h1 style={{ 'font-size': '48px', 'font-weight': 700 }}>
  <GradientText variant="accent" animate>
    Build Something Beautiful
  </GradientText>
</h1>

import { GradientText } from '@arclux/arc-ui-preact';

<h1 style={{ fontSize: '48px', fontWeight: 700 }}>
  <GradientText variant="accent" animate>
    Build Something Beautiful
  </GradientText>
</h1>

API

Prop	Type	Default	Description
`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
`animate`	`boolean`	`false`	Animate the gradient with a shifting background-position cycle

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight