Full-Page Animated Random + Moving Gradient Background
Last updated 3 weeks, 3 days ago | 34 views 75 5
Sixth page link: Animated Moving + Random Gradient Background
Perfect! Let's now take this even further by applying the animated, color-changing gradient as a full-page website background. This effect is visually stunning, lightweight, and adds a modern, dynamic feel to your site.
Full-Page Animated Random + Moving Gradient Background
This version:
-
Applies the animated gradient to the entire
body -
Works with any content on top (text, images, UI)
-
Continues to change gradient colors every few seconds while moving smoothly
Complete Working Example (Copy-Paste Ready)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Full-Page Animated Gradient Background</title>
<style>
html, body {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
color: white;
overflow: hidden;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: 400% 400%;
animation: moveGradient 15s ease infinite;
transition: background-image 2s ease;
}
@keyframes moveGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
z-index: 1;
}
h1 {
font-size: 3rem;
text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Gradient Universe ????</h1>
</div>
<script>
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateGradient() {
const angle = Math.floor(Math.random() * 360);
const color1 = getRandomColor();
const color2 = getRandomColor();
const color3 = getRandomColor();
return `linear-gradient(${angle}deg, ${color1}, ${color2}, ${color3})`;
}
function updateBackground() {
const bg = document.body;
bg.style.setProperty('--bg-gradient', generateGradient());
document.body.style.setProperty('--bg-gradient', generateGradient());
// Apply to the pseudo-element via inline style on <body>
document.body.style.setProperty('--bg-gradient', generateGradient());
document.body.style.backgroundImage = generateGradient();
// Target ::before via JavaScript-friendly method
document.querySelector('body::before')?.style?.setProperty('background-image', generateGradient());
}
// Apply to ::before pseudo-element via CSS rule
function applyGradientToPseudo() {
const sheet = document.styleSheets[0];
const gradient = generateGradient();
for (let rule of sheet.cssRules) {
if (rule.selectorText === "body::before") {
rule.style.backgroundImage = gradient;
}
}
}
// Initial
applyGradientToPseudo();
// Change every 5 seconds
setInterval(() => {
applyGradientToPseudo();
}, 5000);
</script>
</body>
</html>
Explanation:
-
body::before: Adds a background layer behind all content. -
background-size: 400% 400%: Creates a large surface to animate across. -
@keyframes moveGradient: Smoothly animates the background's position. -
JS dynamically updates the background gradient every 5 seconds.
✅ Tips
-
Adjust
15sanimation duration for faster or slower movement. -
Add a semi-transparent overlay if needed for better contrast.
-
Combine with scroll-based animations using libraries like AOS or GSAP.
⚠️ Common Pitfalls
-
Pseudo-element targeting: You can't manipulate
::beforedirectly with JS. Instead, update the CSS rule itself or simulate the effect by applying the background to a full-screen div. -
Flickering: Ensure
transitionis included for smooth changes. -
Accessibility: Ensure sufficient text contrast — use
text-shadowor semi-transparent overlays.
Would you like this version extended with buttons to manually trigger new gradients, or maybe control the speed and direction of animation? Click here
