Создание CSS-градиента онлайн

создание градиента

Здравствуйте, этим постом хотел бы начать новую рубрику на блоге. Она будет посвящена полезным сервисам, которые упрощают жизнь разработчикам, дизайнерам и верстальщикам лендинг пейдж. Надеюсь здесь собрать полезный материал, в том числе и для себя, чтобы все нужные вещи, которые ускоряют процесс разработки, были разложены по полочкам в одном месте.

Также, возможно, перенесу сюда статью о добавлении нестандартных шрифтов на сайт через сервис Google. Поехали.

Генератор CSS-градиента

Сегодня я хотел бы поделиться с вами полезным сервисом, который позволяет в реальном времени создавать градиенты в удобном, интуитивно понятном, визуальном редакторе, а на выходе получать CSS – код, готовый к применению.

Вам остается только скопировать его в буфер обмена и вставить в таблицу стилей классу или идентификатору, которому необходимо на фон поставить градиент.

Онлайн создание градиента

Если вы пользуетесь Фотошопом, то сходу сможете использовать данный сервис в своих проектах, так как он полностью копирует процесс создания градиента в продукте от Adobe.

Если же нет, то вам потребуется всего пара минут, чтоб ознакомиться с интерфейсом и посмотреть основные параметры для настройки (цвет, прозрачность, направление градиента и добавление дополнительных корректирующих для его формирования). После настройки вам остается лишь скопировать CSS или SCSS – код и добавить его, например, к стилям кнопки или применить к фону вашего сайта.

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

Надеюсь, вам станет полезен данный инструмент, как и мне, и вы по достоинству его оцените.

Добавить комментарий