# Gradient Text

> Text filled with a moving gradient.

Source: https://ngwr.dev/bits/gradient-text  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrGradientText } from 'ngwr/bits/gradient-text';

@Component({ imports: [WrGradientText] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/gradient-text';
```

## Playground

```angular-html
<wr-gradient-text
  [animationSpeed]="8"
  direction="horizontal"
  [yoyo]="true"
  [pauseOnHover]="false"
  [showBorder]="false"
>
  Hello, ngwr!
</wr-gradient-text>
```

```angular-ts
import { Component } from '@angular/core';

import { WrGradientText } from 'ngwr/bits/gradient-text';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrGradientText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `colors` | Gradient stops (any CSS colours). | `readonly string[]` | `['#5227FF', '#FF9FFC', '#B497CF']` |
| `animationSpeed` | Seconds per full sweep (or per half if `yoyo` is on). | `number` | `8` |
| `showBorder` | Wrap the text in a surface-coloured pill with the gradient as a border ring. | `boolean` | `false` |
| `direction` | Gradient slide direction. | `'horizontal' \| 'vertical' \| 'diagonal'` | `'horizontal'` |
| `pauseOnHover` | Pause the animation while hovered. | `boolean` | `false` |
| `yoyo` | Bounce back-and-forth instead of restarting. | `boolean` | `true` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/gradient-text`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-gradient-text-duration` | `8s` | `.wr-gradient-text` |
| `--wr-gradient-text-font-weight` | `var(--wr-font-weight-medium)` | `.wr-gradient-text` |
| `--wr-gradient-text-image` | `linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff)` | `.wr-gradient-text` |
| `--wr-gradient-text-line-height` | `var(--wr-leading-tight)` | `.wr-gradient-text` |
| `--wr-gradient-text-padding-x` | `var(--wr-space-md)` | `.wr-gradient-text` |
| `--wr-gradient-text-padding-y` | `var(--wr-space-xs)` | `.wr-gradient-text` |
| `--wr-gradient-text-radius` | `var(--wr-border-radius-lg)` | `.wr-gradient-text` |
| `--wr-gradient-text-size` | `300% 100%` | `.wr-gradient-text` |

## See also

- [Shiny Text](https://ngwr.dev/bits/shiny-text) — Text with a light stripe sweeping across it.
- [Star Border](https://ngwr.dev/bits/star-border) — Light rays that run along the edges of a box.