История градиента началась с web 2.0 и с тех пор продвинулась довольно далеко. Современные градиенты могут быть разработаны исключительно в CSS3, поэтому их стало проще создавать в виде кнопок, фона и даже типографики.

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

Градиенты в хедере

Возможно, один из самых популярных трендов сегодня – использование градиентов на фоне первого экрана.

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

Хедер (первый экран) сайта – отличное место для добавления нового цвета в дизайн. Просто убедитесь, что цвета градиента соответствуют вашему бренду.

Динамические эффекты

С развитием интернета появилась возможность добавлять динамики и развития визуальной составляющей сайта. И в этом нам также поможет градиент.

Использование ярких, контрастных цветов добавит любому дизайну необходимой динамики и движения.

Вместе с тем дизайны сайтов креативных агентств, студий веб-дизайна очень часто не используют данный прием, но только потому что их сайта функционируют больше как эксперименты UI/UX дизайна.

Эффекты динамического градиента должны привлекать внимание и выделять веб-сайт компании среди тысяч ее конкурентов в остальной части Интернета. Они должны быть экспериментальными, но при этом создавать полезный опыт.

Портфолио дизайнера Льюиса Лопеса (Lewis Lopez) является отличным примером.

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

Это действительно уникальный дизайн, но, конечно, экспериментальный подход к фоновым градиентам в портфолио.

Логотипы и эффекты текста

Относительно новым приемом использования градиентов является применение их в логотипах и, особенно, в типографике. Дизайнеры добавляют градиенты к текстам, которые они хотят выделить к иконкам и т.д.

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

Еще один интересный пример использования градиентов в тексте…

Инструменты создания градиентов

Grabient

coolHue

WebGradients

Gradient Buttons