This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com
@omnedia/ngx-gradient-text
is an Angular library that provides a dynamic gradient animation effect for text. This component allows you to display text with a smooth, animated gradient that transitions between two customizable colors.
- Animated gradient effect for text.
- Customizable gradient start and end colors.
- Lightweight and easy to integrate as a standalone component.
Install the library using npm:
npm install @omnedia/ngx-gradient-text
Import the NgxGradientTextComponent
in your Angular module or component:
import {NgxGradientTextComponent} from '@omnedia/ngx-gradient-text';
@Component({
...
imports:
[
...
NgxGradientTextComponent,
],
...
})
Use the component in your template:
<om-gradient-text
[text]="'Gradient Text Effect!'"
[gradientStart]="'#ff7f50'"
[gradientEnd]="'#6495ed'"
styleClass="custom-gradient-text"
></om-gradient-text>
<om-gradient-text
[text]="text"
[gradientStart]="gradientStart"
[gradientEnd]="gradientEnd"
styleClass="your-custom-class"
></om-gradient-text>
text
(required): The text content to be displayed with the gradient effect.gradientStart
(optional): The starting color of the gradient. Accepts any valid CSS color value.gradientEnd
(optional): The ending color of the gradient. Accepts any valid CSS color value.styleClass
(optional): A custom CSS class to apply to the gradient text element.
<om-gradient-text
[text]="'Hello World!'"
[gradientStart]="'#ff69b4'"
[gradientEnd]="'#8a2be2'"
styleClass="gradient-text-style"
></om-gradient-text>
This will create an animated gradient text effect where the text "Hello World!" smoothly transitions between pink and blue-violet.
To customize the appearance of the gradient text, use the styleClass input to apply your own CSS classes.
.gradient-text-style {
font-size: 48px;
font-weight: bold;
font-family: 'Verdana', sans-serif;
}
This will style the gradient text with a custom font size, weight, and font family.
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
This project is licensed under the MIT License.