uiGradients: открытая коллекция градиентов для дизайнеров и разработчиков 83

uiGradients — это открытая коллекция градиентов для дизайнеров и разработчиков, включающая множество готовых линейных и радиальных градиентов. Можно просматривать их онлайн, копировать CSS-код, а также использовать через gradients.json в коде. Быстро применяется на веб-сайтах, в приложениях или в графическом дизайне.

Основные особенности uiGradients

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

• Поддержка множества форматов: поддерживаются CSS, SCSS, LESS, Stylus, Swift, Android XML — специалисты в любых технологиях могут сразу использовать.

• Совместная разработка: все градиенты хранятся в файле gradients.json в репозитории на GitHub, любой может сделать форк и добавить новые цветовые схемы — после одобрения PR они появятся на сайте.

• Богатая экосистема: уже существуют расширение для iOS, компоненты для React, версия SCSS, помощник Handlebars и другие связанные проекты для быстрого использования в самых разных проектах.

• Бесплатно и с открытым исходным кодом: распространяется по лицензии MIT, можно использовать в коммерческих целях и изменять, достаточно сохранить уведомление об авторских правах.

Сценарии использования uiGradients

• для фона, кнопок, навигационных панелей, карточек и других заметных элементов на сайтах или в приложениях;

• для подбора основного или вспомогательного цвета бренда и быстрой проверки сочетаемости цветов;

• для заливки градиентами в графическом дизайне — слайдах, плакатах, изображениях для соцсетей;

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

Как пользоваться uiGradients (на примере Web)

1. Откройте официальный сайт uiGradients, нажмите на любой градиент в списке слева — справа сразу появится предпросмотр.

2. В правом верхнем углу выберите «Copy CSS», чтобы получить примерно такой код:

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. Вставьте его в вашу таблицу стилей или в inline style, сохраните и обновите страницу — результат сразу будет виден.

Полезные приёмы работы с uiGradients

• Если хотите поискать вдохновение наугад, добавьте к адресу сайта #random — и вы попадёте на случайный градиент.

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

• Используйте uiGradients вместе с другими инструментами для подбора цвета, такими как Color Hunt и Mesh Gradients, — так можно создавать более сложные цветовые сочетания.