Animated Gradient Background Generator

Choose a Preset or Start Fresh

Browse our curated animation presets section. Click any preset like Smooth Flow, Wave Motion, or Radial Pulse to instantly apply professional animated gradient effects. Each preset comes with pre-configured colors, animation type, and speed. Or start with the default gradient and customize every aspect using the controls.

Customize Colors

Add, remove, or modify colors in your gradient. Use the color picker or enter hex codes directly. Adjust color positions using the percentage slider. You can add unlimited colors to create complex, multi-color animated gradients.

Select Animation Type

Choose from seven subtle animation types - Flow, Wave, Pulse, Shimmer, Aurora, Prism, or Crystal Shine - each creating a unique visual effect perfect for websites and web applications. Flow creates a smooth moving gradient, Wave provides a gentle oscillating motion, Pulse creates a breathing effect, Shimmer adds a shine effect, Aurora creates a dreamy flowing effect, Prism adds subtle color shifting, and Crystal Shine provides an elegant shimmer.

Adjust Speed and Size

Control the animation speed using the speed slider (1-30 seconds). Lower values create faster animations. For Flow, Wave, Shimmer, Aurora, Prism, and Crystal Shine animations, adjust the background size to control the pattern scale and movement intensity. All animations are designed to be subtle and smooth, perfect for professional websites and web applications.

Preview and Copy Code

See your animated gradient in real-time in the preview area as you make changes. Once satisfied, copy the generated CSS or Tailwind code from the code section. The generator provides both standard CSS code with keyframes and Tailwind CSS configuration for easy integration into your projects.

1. Define the Gradient

Start by creating a CSS gradient using linear-gradient, radial-gradient, or conic-gradient:

2. Create Keyframe Animation

Define a keyframe animation that will animate the gradient position or transform:

3. Apply Animation

Apply the animation to your element with background-size and animation properties:

Animation Types Explained

The key is using background-size larger than 100% to create the movement effect, and background-position in the keyframes to animate the gradient position. Different animation types use different techniques:

• Flow:

  Animates background-position to create a smooth flowing effect. Uses background-size larger than 100% and animates position from 0% to 100% for a subtle, continuous motion.

• Wave:

  Similar to flow but with ease-in-out timing for smoother, more natural oscillating motion. Perfect for creating gentle, organic movement.

• Pulse:

  Uses transform scale to create a breathing/pulsing effect. The gradient itself doesn't move, but the element scales up and down subtly, creating a calming effect.

• Shimmer:

  Moves background-position from -200% to 200% for a shine effect that sweeps across the gradient. Creates an elegant, polished look.

• Aurora:

  Creates a dreamy, flowing effect with smooth transitions. Uses multiple keyframe positions for a more organic, aurora-like movement that's perfect for hero sections.

• Prism:

  Combines background-position animation with subtle hue-rotate filter for gentle color shifting. Creates a sophisticated, prism-like effect that's very subtle and professional.

• Crystal Shine:

  A refined shimmer effect with opacity changes for a more elegant shine. Moves slower and more gracefully than standard shimmer, perfect for premium designs.