Сегодня мы бы хотели поговорить о достаточно легком приеме создания градиентного фона на чистом CSS3. У нас часто спрашивают, как создать необычный градиентный фон, с анимацией или метаморфозами но оказывается часть читателей хотят знать как можно реализовать самый обычный градиент на сайте. По этому мы решили рассказать на достаточно легком примере, как можно создать анимированный градиент для своего сайта. нам понадобится несколько строк кода, в результате чего вы получите отличный фон.

 

Мы сами часто используем в наших демках разные градиенты, заливки с разными оттенками, это не только помогает скрасить демку но и придать немного свежести. По этому красивый оттенок с отливом поможем вам немного оживить ваш проект, а если он будет еще с небольшой анимацией то вы на правильном пути. Смотрите также бесплатные и не только шаблоны для ваших сайтов:

Шаг 1. CSS

Как вы знаете, чтобы сделать такой фон нам нужно применить к стилю body параметры background следующего содержания:

Затем вы должны определить внешний вид анимации. Это делается с помощью двух и более ключей после @keyframes.

Каждый ключ описывает, как должен выглядеть анимированный элемент в текущий момент.

В результате у нас получился вот такой простой фон для сайта в виде градиента с анимацией, попробуйте у себя на сайте и обязательно расскажите как он вам.

Вот и все. Готово!