Tamamen CSS ile oluşturulmuş, yumuşak renk geçişlerine sahip şık bir animasyonlu degrade arka plandır. Arka plan konumu keyframe animasyonuyla hareket ettirilerek akıcı ve doğal bir renk değişimi elde edilir.

Uygulama Kodu

Aşağıdaki kodu kopyalayıp projenizde kullanabilirsiniz.

<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%;
  }
}

Açıklama

Bu animasyonlu arka planın iki temel prensibi şunlardır:

1. background-size: 400% 400%: Degrade boyutu, bulunduğu öğenin 4 katı olacak şekilde ayarlanmış ve görünür alanın dışına taşırılmıştır.
2. @keyframes gradient-flow: background-position değeri 0%’dan 100%’e ve ardından tekrar 0%’a pürüzsüz bir şekilde kaydırılır. Böylece büyütülmüş degrade hareket ettirilerek dinamik bir renk değişimi illüzyonu yaratılır.

Kullanılan linear-gradient renklerini veya animation süresini değiştirerek sitenizin konseptine en uygun tasarımı kolayca elde edebilirsiniz.