Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
An animated gradient background which transitions between colors for text.
🎉
Introducing Magic UI
Introducing Magic UI
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/animated-gradient-text.json
Copy the Source Code
Copy and paste the following code into your project:
AnimatedGradientText.svelte
Add Tailwind CSS
Add the following to your routes/layout.css file:
routes/layout.css
Folder Structure
Folder Structure
Examples
Custom Speed
Fast Gradient
Props
AnimatedGradientText
A text component with animated gradient background effect.
| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Animation speed multiplier for the gradient movement |
colorFrom | string | #ffaa40 | Starting color of the gradient |
colorTo | string | #9c40ff | Ending color of the gradient |
class | string | "" | Additional CSS classes to apply |