6 Animated Gradient Backgrounds with Code Examples

With the advancement of browser and web technologies, the visual effects we can achieve on webpages have become increasingly diverse. Unlike static gradients, dynamic gradient can change colors, light, shadows, or shapes over time or through user interactions via animations or interactive effects.

For instance, colors might flow gently across the background, interact with mouse movements, hovers, clicks, or even create unique experiences in innovative interaction scenarios like gravity sensing, VR, or gesture controls.

Below, I’m sharing 6 unique dynamic gradient code examples from my collection:

1. Flowing Lava Lamp Gradient Cards

I absolutely love this gradient case! It features a card-style layout with a slowly flowing gradient background, enhanced by a noisy texture. On hover, the cards undergo a bright transformation, delivering a retro yet delicate visual effect.

• CodePen: Flowing Lava Lamp Gradient Cards
• Author: Eric

2. Background Gradient Moves with Mouse

This is another fascinating case with very concise code. As the mouse moves, the background gradient dynamically changes. Some momentary gradient colors are so captivating that I’ve even taken screenshots to use them as static backgrounds.

• CodePen: Background Gradient Moves with Mouse
• Author: Mark Boots

See the Pen Background gradient moves with mouse by Mark Boots (@MarkBoots) on CodePen.

3. Interactive Gradient & Glassmorphism with Noise

This infinitely dynamic background is perfect for use as a backdrop for blurred glass elements. For example, pairing it with the latest Liquid Glass style could be an excellent design choice.

• CodePen: Interactive Gradient & Glassmorphism
• Author: TOMAZKI

See the Pen Interactive Gradient & Glassmorphism with noise by TOMAZKI (@Podgro) on CodePen.

4. SVG Gradient Wave Generator

As a gradient generator, it offers a wide range of customizable parameters to create diverse and unique visual effects. The generated gradients are visually very refined.

• CodePen: SVG Gradient Wave Generator
• Author: Supah

See the Pen SVG Gradient Wave Generator by Fabio Ottaviani (@supah) on CodePen.

5. Aurora Flow Gradient Background

This comes from one of my favorite websites, ReactBits, an open-source collection of animated, interactive, and fully customizable React components for building stunning interfaces. It has garnered 15K stars on GitHub. Enjoy it!

• ReactBits: Aurora Flow Gradient Background

6. Light and Shadow Flowing Dark-Toned Gradient Background

Although the official name is “Silk,” and it does indeed mimic the visual effect of silk, as a designer, I believe that with some parameter and detail adjustments, it can simulate and produce various visual effects in many of my design projects.

• ReactBits: Silk flow Background