import { Component } from '@angular/core';
import { WrGradientText } from 'ngwr/bits/gradient-text';
@Component({ imports: [WrGradientText] })
export class MyComponent {}Gradient Text
Text filled with a moving gradient.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
<wr-gradient-text
[animationSpeed]="8"
direction="horizontal"
[yoyo]="true"
[pauseOnHover]="false"
[showBorder]="false"
>
Hello, ngwr!
</wr-gradient-text>Customize
Speed (s)
Direction
Yoyo
Pause on Hover
Border
Text
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 |