С подключение градиентов ваш сайт становится наиболее оригинальным, если говорить о фоне на интернет ресурсе. А если сделать так, чтоб плавно все сменялось на те оттенки градиента. которые вы задали, что будет безусловно смотреться оригинально, но здесь смотря какое тематическое направление у портала. Но все же сам эффект давайте подробно разберем, так как он не такой сложный, как кажется изначально.
Так как еще при этом будет возможность самостоятельно анимировать градиент, что нужно знать. Это все желается для того, чтоб фон иди элемент где он находится, точнее интерфейс, стал необычно переливаться той палитрой, что была указана, это разными цветовыми гаммами.
Изначально нужно прописать библиотекой granim.js: https://sarcadass.github.io/granim.js/ - которая также будет представлено на demo странице.
Есть тема, чтоб градиент сделать прозрачным и его наложить изображение, вот так получиться.
Приступаем к установке:
HTML
Код
<canvas id="dopletun-kasevtedkos"></canvas>
CSS
Код
#dopletun-kasevtedkos {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS
Код
var granimInstance = new Granim({
element: '#dopletun-kasevtedkos',
name: 'basic-gradient',
direction: 'left-right',
opacity: [1, 1],
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#a5106b', '#650963'],
['#0d9196', '#0abfa2'],
['#cd1cf1', '#8a28de']
]
}
}
});
У каждого фона идет 2 оттенка, что можно сменить на свои, а вообще идет 3 фона по умолчанию.
Демонстрация
