Animated gradient background

A smoothly shifting multi-color gradient background that loops forever.

background
gradient
animation

Color 1#6b46ff

Color 2#ff3ea5

Color 3#00b8d4

Speed8s

HTML

<div class="animated-bg">Animated gradient</div>

CSS

:root {
    --c1: #6b46ff;
    --c2: #ff3ea5;
    --c3: #00b8d4;
    --speed: 8s;
}

.animated-bg {
    width: 100%;
    min-height: 160px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(120deg, var(--c1), var(--c2), var(--c3), var(--c1));
    background-size: 300% 300%;
    animation: bg-shift var(--speed) ease infinite;
}

@keyframes bg-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

How it works

The trick is an oversized gradient that slides:

The linear-gradient repeats its first color at the end so the loop is seamless.
background-size: 300% makes the gradient three times wider than the box, leaving room to pan.
The keyframes animate background-position from one side to the other and back, so the colors drift endlessly.

No canvas, no JS — just one element. Keep --speed slow for a calm hero background; speed it up for a livelier accent.