Fundo com Gradiente Animado

Um elegante fundo de gradiente animado com transição suave de cores, implementado exclusivamente com CSS. Utilizando animação de keyframes para deslocar a posição do fundo, cria-se uma mudança de cor fluida e contínua.

Código de Implementação

Copie o código abaixo e integre-o ao seu projeto.

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

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Explicação

Os dois pontos cruciais desta animação de fundo são:

1. background-size: 400% 400%: Amplia o tamanho do gradiente para 4 vezes o tamanho do elemento, expandindo-o para além da área visível.
2. @keyframes gradient-flow: Ao deslocar suavemente o background-position de 0% para 100% e voltar para 0%, cria-se a ilusão de que o gradiente expandido está em movimento e mudando de cor.

Você pode personalizar as cores do linear-gradient ou a duração da animation para alinhá-los ao tema do seu site.