Gradient text

Text painted with a CSS gradient.

Build delightful interfaces

import { BuiGradientText } from 'ng-blatui';

<bui-gradient-text>Build delightful interfaces</bui-gradient-text>

<bui-gradient-text preset="sunset">Sunset</bui-gradient-text>
<bui-gradient-text preset="ocean">Ocean</bui-gradient-text>

<bui-gradient-text [animate]="true" from="#06b6d4" via="#8b5cf6" to="#ec4899">Shimmering text</bui-gradient-text>

Ship faster with ng-blatui — accessible, copy-paste components for your next Angular app.

Ship with <bui-gradient-text preset="aurora">ng-blatui</bui-gradient-text> today.

Prop	Type	Default	Description
`preset`	`"aurora" \| "brand" \| "candy" \| "flamingo" \| "gold" \| "mint" \| "ocean" \| "sunset"`	`'brand'`	Named colour preset used when from/via/to are not set.
`from`	`string \| null`	`null`	Gradient start colour; overrides the preset's first stop.
`via`	`string \| null`	`null`	Gradient middle colour; overrides the preset's second stop.
`to`	`string \| null`	`null`	Gradient end colour; overrides the preset's third stop.
`animate`	`boolean`	`false`	Whether to animate a horizontal shimmer across the gradient.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.