Forth page like: How to Create Animated Random Gradient Backgrounds with JavaScript + CSS
Great! Let’s now take it to the next level with a moving gradient background — this effect creates the illusion of the gradient "shifting" over time, giving your site a sleek, animated look.
Moving Gradient Background with Pure CSS
Unlike the previous example, this version doesn’t require JavaScript — it uses CSS keyframes to animate the gradient position.
✅ Key Concept:
We animate the background-position of a large repeating gradient, giving the illusion of smooth movement.
Complete Working Example (Single HTML File)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moving Gradient Background</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #111;
font-family: Arial, sans-serif;
}
.gradient-box {
width: 90vw;
height: 90vh;
border-radius: 20px;
color: white;
font-size: 28px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: moveGradient 15s ease infinite;
}
@keyframes moveGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="gradient-box">Moving Gradient</div>
</body>
</html>
✨ What’s Happening Here?
-
background-size: 400% 400%makes the gradient large enough to scroll. -
The
@keyframes moveGradientsmoothly animates the gradient's background-position. -
The animation loops infinitely every 15 seconds.
Tips & Customizations
-
Speed it up: Change
15sin the animation duration to10s,5s, etc. -
Change colors: Modify the gradient colors inside
linear-gradient(...). -
Add blur or glow: Add
box-shadowto make it glow.
box-shadow: 0 0 20px rgba(255,255,255,0.3);
⚠️ Common Pitfalls
-
Choppy Animation: Use
easeorlinearfor smoother transitions. -
Overloading Colors: Stick to 3–4 complementary colors for best effect.
-
Poor Contrast: Ensure your text remains readable (add text shadow if needed).
✅ Conclusion
A moving gradient background is a lightweight, stunning visual feature that adds polish to your UI with zero JavaScript.
Would you like a version that combines both moving and random colors? That’ll take a bit of JavaScript magic — Click here
