Text Highlight

A text effect that fill background of a text to highlight it.

Examples

With 3s delay

Rounded text background

Color from CSS variables: use the paintbrush icon in the top right corner to change the color.

With text color change.

Prop Name	Type	Default	Description
`delay`	`number`	`0`	Delay before the animation starts, in `ms`.
`duration`	`number`	`2000`	Duration of the animation, in `ms`.
`text-end-color`	`string`	`inherit`	Color of the text at the end of the animation. Match WCAG recommendations.

You can copy and paste the following code to create this component:

TextHighlight.vue

On This Page