Text Gradient

⭐Star

🏅Original

TextGradient is used to render text with gradient fill effects. Compared to standard CSS implementations, it encapsulates complex compatibility handling and supports linear, radial, and conic gradients. It offers two flexible configuration methods: JS Props and CSS Variables.

Basic Usage

Configuration via Props

The most direct way is to pass an array of colors through the colors property. The component defaults to a linear gradient (linear).

<script setup>
import { reactive } from 'vue'
const myColors = ['#6366f1', '#a855f7', '#ec4899'] // Indigo -> Purple -> Pink
</script>

<template>
  <div class="demo-box">
    <TuiTextGradient :colors="['blue', 'cyan']">
      TechUI Design System
    </TuiTextGradient>

    <TuiTextGradient 
      :colors="myColors" 
      :angle="90" 
      :fontSize="32"
    >
      Colorful Text Effect
    </TuiTextGradient>
  </div>
</template>

Gradient Types

Switch the gradient mode using gradientType. Supported types include linear, radial, and conic.

<template>
  <TuiTextGradient 
    gradientType="radial" 
    :colors="['#FFD700', '#FF8C00']"
  >
    Radial Gradient Text
  </TuiTextGradient>
</template>

TuiColors is the core of TechUI's powerful color system. Combined with the $c utility function and LESS variables, it greatly simplifies the complexity of color management and gradient generation.

Below is supplemental content for the TextGradient documentation, adding advanced usage combined with TuiColors in the Basic Usage and CSS Variables sections.

Integration with TuiColors (JS)

The TextGradient component works perfectly with the @techui/colors library. By importing the core utility $c, you can easily call system preset color scales or use the $c.scale method to generate smooth gradient arrays with high spans.

This is particularly useful for generating rainbow colors, heatmaps, or complex text gradients that span multiple color families.

<script setup>
import { computed } from 'vue'
// Import TuiColors utility as needed
import { $c } from "@techui/colors" 

// Create a 5-step complex gradient spanning Red -> Orange -> Cyan -> Purple
// Preset variables: $c.rel5 (Red Light 5), $c.orl5 (Orange Light 5)...
const complexColors = computed(() => {
  // $c.scale automatically calculates the interpolated colors in between
  return $c.scale([$c.rel5, $c.orl5, $c.cyl5, $c.pul5], 5)
})
</script>

<template>
  <div class="demo-box">
    <TuiTextGradient 
      :colors="complexColors" 
      :fontSize="36"
      fontWeight="bold"
    >
      TuiColors Scale Gradient
    </TuiTextGradient>
  </div>
</template>

Global or On-Demand Import of $c

For details on how to introduce @techui/colors globally or on-demand, please refer to the Getting Started - Extra Chapters - Using Color Tables in JS section.

CSS Variable Control

In addition to Props, the component deeply supports style overrides via CSS variables. This approach is powerful when combined with classes or dynamic style bindings, as it avoids excessive JS calculations.

Quick Color Override (Recommended)

If you only need to modify the start color, end color, or angle of a linear gradient, you can use shorthand variables.

<template>
  <TuiTextGradient class="my-gradient-text">
    Defining Colors via CSS Variables
  </TuiTextGradient>
</template>

<style>
.my-gradient-text {
  /* Define start color */
  --tui-txtg-c1: var(--danger-base);
  /* Define end color */
  --tui-txtg-c2: var(--warning-base);
  /* Define angle */
  --tui-txtg-deg: 180deg;
  /* Define font size */
  --tui-txtg-fz: 28px;
}
</style>

Full Background Customization (Advanced)

If you require extremely complex gradients (such as multiple gradients or specific radial positions), you can directly override the entire background property via --tui-txtg-bg.

<template>
  <TuiTextGradient class="complex-gradient">
    Fully Custom CSS Background
  </TuiTextGradient>
</template>

<style>
.complex-gradient {
  /* Write full CSS gradient syntax directly */
  --tui-txtg-bg: radial-gradient(circle at center, #ff0000, #0000ff);
  
  /* You can also define font properties */
  --tui-txtg-fw: bold;
}
</style>

Integration with TuiColors (LESS)

In style sheets, you can directly use the LESS variables provided by TuiColors (such as @rel5, @bll6, etc.) to map to the CSS variables required by the component. This allows the text gradient to integrate perfectly into the current theme system.

Global Less Variable Configuration

For details on how to configure global Less variables for @techui/colors, please refer to the Getting Started - Extra Chapters - Global Variables in Less section.

<template>
  <TuiTextGradient class="theme-gradient-text">
    Defining Gradients via LESS Variables
  </TuiTextGradient>
</template>

<style lang="less">
.theme-gradient-text {
  // Map TuiColors LESS variables to component CSS variables
  // @rel5: Red Light 5
  // @bll5: Blue Light 5
  --tui-txtg-c1: @rel5;
  --tui-txtg-c2: @bll5;
  
  // Adjust angle
  --tui-txtg-deg: 135deg;
  --tui-txtg-fz: 32px;
}
</style>

API Reference

Props

Property	Description	Type	Default
colors	Array of gradient colors, must contain at least two values (e.g., ['red', 'blue'])	Array	null
gradientType	Gradient type, options: 'linear', 'radial', 'conic'	String	'linear'
angle	Angle of linear gradient (deg), only effective when type is linear	Number	0
fontSize	Font size (px)	Number	—
fontWeight	Font weight, options: 'normal', 'bold', 'bolder', 'lighter'	String	null

CSS Variables

Variable	Description	Remarks
--tui-txtg-c1	Linear gradient start color	Only effective when colors prop is absent
--tui-txtg-c2	Linear gradient end color	Only effective when colors prop is absent
--tui-txtg-deg	Linear gradient angle	Defaults to 90deg
--tui-txtg-bg	Complete background style	Highest priority, overrides all gradients generated by props
--tui-txtg-fz	Font size	For CSS-controlled sizing
--tui-txtg-fw	Font weight	For CSS-controlled weight
--tui-txtg-ff	Font family	—

Slots

Slot Name	Description
default	The text content to which the gradient effect will be applied