This text demonstrates contrast against your gradient background
.animate-gradient {
background-size: 200% 200%;
animation: gradientAnimation s ease infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
This tool generates animated gradient backgrounds using Tailwind CSS utility classes. The animation works by shifting the background position, creating a smooth color transition effect that's perfect for hero sections, loading states, or decorative elements. If you're building interactive components, you might also explore the hover effect generator for additional interactive states.
bg-gradient-{direction} - Sets gradient directionfrom-{color}, via-{color}, to-{color} - Color stopsanimate-gradient - Custom animation classbg-blend-{mode} - Optional blend modesAnimated gradients draw attention to key content areas. Works well with overlay text using sufficient contrast.
Subtle, slow-moving gradients can indicate progress without distracting spinner animations. Our dedicated loader generator offers more specialized loading animations.
Use behind cards, modals, or entire page backgrounds to add depth and visual interest.
Hover effects can change gradient direction or colors for buttons and interactive cards. For more sophisticated animations, consider combining with our border animation generator.
Click the "Copy" button to copy all Tailwind classes. Paste them into your HTML element's class attribute:
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-gradient"> <!-- Your content here --> </div>
The animation requires custom CSS. Add this to your global CSS file or component styles:
/* Add to your CSS file */
.animate-gradient {
background-size: 200% 200%;
animation: gradientAnimation 5s ease infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
If you're using a custom Tailwind configuration, ensure animations are enabled:
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
gradient: 'gradientAnimation 5s ease infinite',
},
keyframes: {
gradientAnimation: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
}
}
}
}
}
@media (prefers-reduced-motion: reduce)Yes, all generated classes are valid Tailwind utilities. If you're using JIT mode, the classes will be included automatically when you use them in your HTML.
Use the slider in the tool to adjust speed. In your implementation, modify the animation duration in the CSS or Tailwind config (e.g., animation: gradientAnimation 3s ease infinite).
Yes, use the color picker to select any hex color. The generator maps these to the closest Tailwind color class. For exact colors, use inline styles or extend your Tailwind config.
Yes, you can create separate gradients for dark mode using Tailwind's dark: variant (e.g., dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-900).
Need more Tailwind tools? Explore our collection of generators for buttons, cards, layouts, and more. If you're designing cards with gradient backgrounds, the 3D card maker pairs beautifully with animated gradients. For structured content, the grid generator can help you build complex layouts.