Многоцветный размытый фон с помощью градиентов CSS3

Продолжаю экспериментировать с градиентами CSS3. С помощью градиентов можно добиться по-настоящему фантастичных эффектов в веб-дизайне, в том числе и создавать причудливые фоны, которые смотрятся более симпатично, чем однотонные.
Поскольку любой градиент по сути считается фоновым изображением и отдельного свойства для него нет, добавляется в css через background-image или универсальное свойство background.
Уверен, что создав однажды самостоятельно простейший градиент с переходом между двумя цветами, вы уже не остановитесь и будете искать всё новые, более сложные комбинации эффекта.
Например, с помощью повторяющихся линейных градиентов можно «нарисовать» довольно-таки симпатичный, многоцветный фон с эффектом размытия:

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

Короче, далее всё по накатанной, в данном примере использовал свойства background-color (базовый цвет фона), background (собственно для добавления градиента), background-repeat (определяет, как будет повторяться фоновое изображение) и background-blend-mode (режим наложения).
Весь фарш представлен ниже, а поковыряться в коде и поиграться со значениями, можете непосредственно песочнице Jsfiddle
 

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: