CSS Animated Background - Dynamic Effects

Animated backgrounds are a great way to add dynamics to your website without overloading performance. In this example, you will learn how to create fluid gradient animations and interactive effects using pure CSS.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Background</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animated-bg">
        <div class="content">
            <h1>Animated Background</h1>
            <p>Example of a gradient background with infinite animation.</p>
            
            <div class="interactive-bg">
                <h3>Interactive Element</h3>
                <p>Move your mouse over this element for effect.</p>
            </div>

            <div class="wave-bg">
                <h3>Wave Effect</h3>
                <p>Background with an animated wave pattern.</p>
            </div>
        </div>
    </div>
</body>
</html>
                    

RESULT

Background with Animated Gradient

The background is created using a linear color gradient, where colors transition between: lightblue -> lightyellow -> orange -> purple
Gradient animation:
1. using @keyframes gradientAnimation the background moves (in animation) by changing background-position
2. animation makes the gradient "flow" from left to right and back

The effect is achieved by:

background-size: 200% 200%;
animation: gradientAnimation 10s ease infinite;

Animated Container

The .container element is designed as a box with rounded edges (border-radius), with shadows (box-shadow)

Shadow animation (shadowChange):

animation changes the shadow color around the element based on key frames (0% -> 100%)
colors gradually change from blue, yellow, orange to purple:

@keyframes shadowChange {
    0% {box-shadow: ... rgba(135, 206, 250, 0.5);} /* Blue shadow */
   25% {box-shadow: ... rgba(255, 255, 150, 0.5);} /* Yellow shadow */
   50% {box-shadow: ... rgba(255, 165, 0, 0.5);}   /* Orange shadow */
   75% {box-shadow: ... rgba(153, 101, 255, 0.5);} /* Purple shadow */
   100% {box-shadow: ... rgba(135, 206, 250, 0.5);} /* Back to blue */
}

Modular Design

html and body use a base gradient, without additional elements yet
.container is the main dynamic element on the page, displayed in the center of the page and serves as the visual focal point.