Модные градиенты в веб-дизайне
Проанализируем одну из тенденций цифрового дизайна, которая сейчас так популярна - градиент.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/aa/23/a6/5586dd08688.jpg)
Градиенты были модны некоторое время назад. Сайт Spotify снова сделал их популярными, использовав градиенты duotone на фотографиях как характерный элемент бренда. Небольшой урок, как создавать градиенты duotone в Photoshop.
![Градиенты duotone на фотографиях](https://cloud.pllsll.ru/1366x/pollskill/storage/c2/50/f1/8bf17a660c7.jpg)
В этом году мы везде наблюдали различные градиенты с яркими цветовыми палитрами, неправильной формы, с эффектами размытия и искажения. Но если раньше были распространены крупные градиентные фоны или фотографии, то теперь появился тренд использовать их в дополнительных элементах дизайна, например при наведении на ссылку (hover эффект), в заголовках, 3D-элементах, иконках и многих других местах.
![Градиент hover эффект](https://cloud.pllsll.ru/1366x/pollskill/storage/5e/b0/1d/b7bf5717d35.jpg)
IPhone X задал парадигму тенденций на 2018. На главной странице, в текстах и многих элементах рекламной кампании используются градиенты. Однако они не похожи на традиционные линейные или радиальные градиенты, они многоцветны и цвета их смешаны неравномерно.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/6f/6b/20/391c4291359.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/2b/9b/54/7625aeced8e.jpeg)
Градиенты в 3D? Цвета вершин и палитра цветов.
Нельзя не упоминуть про градиенты в 3D, поскольку освещение сцены генерирует градацию света на поверхности объекта. Для этого тренда характерно использование градиентов как текстуры объекта, когда имитируется методы вершиннный цвет (vertex color) и палитра цветов (colormap gradient). Оба метода служат для чисто декоративной цели, поскольку они используются для представления данных или отображения трехмерных объектов.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/ad/64/a6/896d53f8fe8.jpeg)
Типы градиентов
Смешивать цвета можно несколькими способами. Наиболее распространенными являются линейные или радиальные градиенты с различными параметрами, такими как радиус, ориентация, непрозрачность или цветовые вспышки. В случае с модным эффектом iphone мы видим неравномерное смешивание, в котором используются градиентные сетки или другие методы. С помощью градиентной сетки искажается плоскость градиента. Появляется возможность создать множество различных видов естественных, неоднородных одноцветных, двухцветных и многоцветных градиентов.
![](https://cloud.pllsll.ru/1366x/pollskill/storage/58/38/cd/da133f541f0.jpeg)
Полезные инструменты для CSS-градиентов
Существую множество доступных инструментов с помощью которых можно создать градиенты в визуальных редакторах и затем воссоздать эти эффекты в CSS: Webgradients https://webgradients.com , Khroma AI http://khroma.co , Color Space https://mycolor.space, UI Gradients https://uigradients.com , Grabient https://www.grabient.com , Coolhue https://webkul.github.io/coolhue/ , Easing Gradients CSS https://larsenwork.com/easing-gradients/ .
![](https://cloud.pllsll.ru/1366x/pollskill/storage/ab/40/4c/e732550749e.jpeg)
Коллекция градиентов Awwwards
![](https://cloud.pllsll.ru/1366x/pollskill/storage/53/a7/36/120801b4029.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/cc/21/a4/148ec2a44f5.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/89/8e/42/6e502b2ee8b.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/34/f1/92/9f26565ce29.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/a9/b5/44/953c21e3c49.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/30/58/12/8bd371dc325.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/6c/0e/7c/db753914a4b.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/0e/fb/8a/345f2c7434b.jpeg)
![](https://cloud.pllsll.ru/1366x/pollskill/storage/75/14/e6/e2e32fa1a59.jpeg)