Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrGradientText } from 'ngwr/gradient-text';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 dark pill with the gradient as a border. | 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
Custom properties ngwr/gradient-text publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-gradient-text-duration | 8s | .wr-gradient-text |
--wr-gradient-text-image | linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff) | .wr-gradient-text |
--wr-gradient-text-size | 300% 100% | .wr-gradient-text |