Фон для сайта c анимированным градиентом CSS

Фон для сайта c анимированным градиентом CSS

Фон для сайта c анимированным градиентом смотрится очень красиво, как для всего сайта, так и для его элементов. Можно использовать градиент с двумя и более цветами. Для того, чтобы подобрать цвета, можно воспользоваться генератором градиента.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-gradient-animation">Lorem Ipsum</div>

CSS


.bg-ex-gradient-animation{
  background:linear-gradient(200deg,#a8d7e0,#213b40); /* Цвета градиента */
  background-size:500% 500%;
  -webkit-animation:ServiceAnimation 10s ease infinite;
  -moz-animation:ServiceAnimation 10s ease infinite;
  -o-animation:ServiceAnimation 10s ease infinite;
  animation:ServiceAnimation 10s ease infinite; /* Время смены цвета */
}
@-webkit-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@-moz-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@-o-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
By julia