Красивые css градиенты: Красивые CSS и PNG градиенты для сайта, инстаграм и фотошопа — Gradients.app

30.04.2023 Facebook Twitter LinkedIn Google+ Разное

Создание красивых градиентов на CSS / Хабр

Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:

Заметили, что в центре он становится бледным и грязным?

Это явление Эрик Кеннеди назвал «мёртвой зоной серого». Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

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

Как вычисляются градиенты

Задавались ли вы когда-нибудь вопросом, как работает алгоритм linear-gradient в CSS? Как он вычисляет конкретное значение цвета для каждого пикселя вдоль спектра?

Он вычисляет его, беря математическое среднее для каждого из трёх цветовых каналов: Red, Green и Blue.





[Прим. пер.: в оригинале статьи все изображения интерактивны.]

В цветовом пространстве RGB мы создаём цвета смешением трёх каналов: красного, зелёного и синего. Каждый канал имеет диапазон значений от 0 до 255.

Если мы увеличим до максимума значения всех трёх каналов — 255 / 255 / 255, то получим чисто белый цвет. А если установим каждый канал на 0, то получим чёрный, отсутствие всех цветов.

На самом деле, если всем трём каналам присвоить одинаковое значение, то результат всегда будет цветом в оттенках серого:

В показанном выше виджете градиента мы начали с чисто жёлтого цвета (255/255/0). При перемещении по градиенту мы начинаем примешивать синий (0/0/255). К тому моменту, как мы достигнем самой середины, мы уберём половину жёлтого и добавим половину синего.

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

Мне кажется немного странным, что среднее между синим и жёлтым — это серый. Смешав два очень насыщенных цвета, мы получили совершенно блеклый. Вот если бы был какой-то способ смешения только пигмента с постоянным сохранением насыщенности…

Альтернативные цветовые модели

Существует множество разных способов задания цвета. Пока мы использовали только модель R/G/B. И, честно говоря, эта цветовая модель довольно отстойная.

Давайте поговорим о другой цветовой модели: HSL.

HSL расшифровывается как Hue / Saturation / Lightness (тон, насыщенность и светлота). Если вы пользовались селектором цветов, то, вероятно работали с этой цветовой моделью.

Пример:

Вот что означает каждое значение:

  • Hue
    (тон) управляет тем, каким будет пигмент, где находится цвет на шкале цветов.
  • Saturation (насыщенность) управляет тем, насколько ярок будет цвет.
  • Lightness (светлость) управляет тем, насколько светлым или тёмным будет цвет.

Лично мне такой способ кажется гораздо более интуитивным способом восприятя цветов.

Но вот что по-настоящему волшебно: что если вместо усреднения значений RGB в наших градиентах мы будем усреднять значения HSL?





Мёртвой зоны серого больше нет, потому что теперь мы смешиваем не значения R/G/B, а значения H/S/L.

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

Вот ещё один пример, на этот раз смешение цветов с разной насыщенностью и светлостью. Ниже для сравнения показаны цвета со стандартным RGB-смешением:





Достаточно наглядная разница, правда?

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

Согласно цветовой модели HSL, оба этих цвета имеют одинаковую «светлость»:

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

К счастью, существуют другие цветовые модели, учитывающие восприятие человека. Например, HCL, похожая на HSL, однако смоделированная с учётом зрения человека:





Какая цветовая модель лучше всего? Это сильно зависит от того эффекта, к которому вы стремитесь! Я люблю экспериментировать с множеством разных цветовых моделей, чтобы найти оптимальную для конкретного градиента.

Используем знания на практике

У меня есть хорошие и плохие новости. Давайте начнём с плохих.

CSS не позволяет нам выбирать цветовую модель. используемую в вычислении градиентов. Мы не можем выбрать интерполяцию HSL для конкретного градиента, по крайней мере, пока. Насколько я знаю, CSS Images Level 4 даёт возможность указания «способа интерполирования цветов», но он поддерживается не всеми браузерами.

Однако есть и хорошие новости: исхитрившись, мы можем обойти эти ограничения.

Градиенты в CSS не привязаны только к двум крайним цветам. Можно передавать 3 цвета, или 10 цветов, или даже 100 цветов.

Сначала нам нужно вручную вычислить набор промежуточных цветов. Мы можем сделать это с помощью JavaScript, чтобы можно было использовать любую нужную цветовую модель (благодаря полезной библиотеке наподобие chroma.js):




Далее мы берём этот набор цветов и передаём каждое значение функции градиента CSS:

.box {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #f8ea47,
    #f0d465,
    #f0d465,
    #e7bf7c,
    #ddaa8f,
    #d095a1,
    #c280b2,
    #b26cc2,
    #9d56d2,
    #8440e1,
    #6028f0,
    #0000ff
  )
}

(Здесь мы используем линейные градиенты, но тот же трюк работает с радиальными и коническими градиентами!)

Но постойте, разве движок CSS не использует RGB-интерполяцию для вычисления пространств

между каждым из указанных цветов? Если мы не передаём сотни цветов, достаточные для каждого отдельного пикселя, то всё равно используем RGB-интерполяцию!

Да, это правда, но, к счастью, это не особо важно.

Когда два цвета очень схожи друг с другом, на самом деле не важно, какую цветовую модель мы используем. Градиент получится приблизительно одинаковым. Мы не получим сильно отличающееся «среднее» значение, как бы мы ни вычисляли это «среднее».

Например, вот градиент, в котором используются два очень схожих цвета:


Цвета настолько близки, что RGB-интерполяция никак не может их испортить.

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

Ну а теперь самое интересное. Давайте поговорим о том, как генерировать эти градиенты.

Знакомство с генератором градиентов

Я создал инструмент, позволяющий генерировать роскошные, красивые градиенты, которые можно использовать в CSS:

Я в восторге от этого инструмента. В нём используются все элементы, о котором говорилось в посте, а также другие трюки (типа применения кривой для управления распределением цветов).

Настраивайте цвета, пока не получите нужный результат, а затем скопируйте фрагмент кода CSS внизу. Пока инструмент генерирует только линейные градиенты, но вы можете скопипастить набор цветов CSS и применять их в радиальных и конических градиентах!

Генератор находится здесь: https://www.joshwcomeau.com/gradient-generator/

Предыдущие работы

На создание собственного генератора меня вдохновили эти два чудесных генератора градиентов:

  • Vivid Gradient Generator Tool Эрика Кеннеди
  • Polychroma, созданный @stormwarning

CSS градиенты для веб дизайна. Подборка сервисов

Бесплатные онлайн инструменты являются нормой для современных веб-дизайнеров. Зачем изобретать колесо, если можно сэкономить время, используя бесплатные онлайн сервисы?

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

Поэтому я сделала для вас подборку из 7 бесплатных инструментов для создания CSS градиентов.

И так, поехали!

Содержание

  • 1 WebGradients
  • 2 uiGradients
  • 3 CSS аниматор градиентов
  • 4 Редактор градиента Colorzilla
  • 5 ColorSpace градиенты
  • 6 Бесконечные градиенты
  • 7 Градиентные кнопки
  • 8 Заключение

WebGradients

Перейти на сайт

На WebGradients вы найдете целую коллекцию готовых градиентов разных цветов и стилей.

Все они заранее подготовлены и готовы к работе. Воспринимайте этот сайт, как библиотеку градиентов, которая содержит более 180 вариантов.

Если вы обратите внимание на верхнюю навигацию сайта, то там вы найдете ссылки для загрузки этих градиентов как в PSD, так и в файле Sketch.

Вы также можете скопировать градиенты как код CSS3, а затем добавить его прямо на сайт.

 Здесь нет неправильных ответов — здесь просто много градиентов.

uiGradients

Перейти на сайт

Обратите внимание на библиотеку uiGradients для создания интересных вариантов css градиентов.

В верхней навигации (слева) вы увидите кнопку с надписью «Show all gradients» (показать все градиенты). Нажмите на нее, чтобы просмотреть огромный список различных стилей градиента. Серьезно, их там очень много.

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

CSS аниматор градиентов

Перейти на сайт

Итак, градиентная анимация. Сервис Gradient Animator — идеальный способ воплотить это в реальность. Все может работать прямо через CSS3 без необходимости использовать JavaScript.

На боковой панели нажмите «Add colour» (добавить цвет) и выберите поочередно два цвета вашего градиента.  Измените скорость перехода, измените направление, затем нажмите «Preview»(предварительный просмотр).

Уверена, что вы оцените преимущество этого онлайн сервиса.

Редактор градиента Colorzilla

Перейти на сайт

Каждый веб-дизайнер должен знать о редакторе градиента Colorzilla.

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

Действительно, этот инструмент, который вы должны добавить в закладки. И естественно, там уже есть заранее построенные градиенты.

ColorSpace градиенты

Перейти на сайт

Кроме того, что ColorSpace отлично подбирает цветовые схемы, он еще имеет свой небольшой генератор градиентов, который позволяет разработчикам создавать пользовательские CSS коды из выбранных цветов.

У этого сервиса градиентов, более простой интерфейс, чем у Colorzilla.  Элементы управления довольно очевидны.  Единственный минус в том, что на ColorSpace можно выбрать только два цвета за раз.

На Colorzilla вы можете составить градиент из нескольких цветов. Но это не означает, что ColorSpace хуже. Это значит, что его лучше всего использовать для простых градиентов.

Бесконечные градиенты

Перейти на сайт

Да, это именно то, на что похоже. Бесконечный градиент.

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

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

К сервису прилагается подробная инструкция, находится она здесь.

Градиентные кнопки

Перейти на сайт

И напоследок, кнопочки.

Бесплатная библиотека с открытым исходным кодом, наполненная различными дизайнами кнопок.

Библиотека проста в использовании и имеет множество градиентов на выбор.

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

Заключение

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

Стоит ли мне продолжать выкладывать подобные подборки?

Не забудьте добавить сайт в закладки. Здесь будет много всего полезного для веб-дизайнеров и фрилансеров.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

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

Итак, вот линейный градиент CSS, идущий от чистого желтого к чистому синему:

Обратите внимание, что он немного размыт и грязен в середине?

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

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

Ссылка на этот заголовок

Как рассчитываются градиенты

Задумывались ли вы, как работает алгоритм CSS линейно-градиентный ? Как он на самом деле вычисляет конкретное значение цвета для каждого пикселя в спектре?

Он определяет это, взяв среднее математическое значение для каждого из трех цветовых каналов: красного, зеленого и синего.

Щелкните и перетащите, чтобы увидеть конкретную разбивку RGB для каждого пикселя на пути:

Как использовать: Щелкните и перетащите, чтобы изменить положение индикатора, или сфокусируйте индикатор и используйте клавиши со стрелками влево/вправо.

В цветовом пространстве RGB мы создаем цвета, смешивая три канала: красный, зеленый и синий. Каждый канал имеет диапазон от 0 до 255.

Если мы выставим на максимум все три канала — 255/255/255 — мы получим чистый белый цвет. И если мы установим каждый канал в 0, мы получим черный цвет, отсутствие какого-либо цвета.

На самом деле, если для всех трех каналов установлено одинаковое значение, результатом всегда будет цвет в градациях серого:

В приведенной выше демонстрации мы начинаем с чистого желтого цвета (255/255/0). По мере продвижения по градиенту мы начинаем смешивать синий цвет (0/0/255). К тому времени, когда мы достигаем самого центра, мы смешали половину желтого и половину синего.

Другими словами, все три канала сходятся к своему среднему значению, 127,5. И в результате цвет серый.

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

Ссылка на этот заголовок

Альтернативные цветовые режимы

Существует множество различных способов представления цвета. До сих пор мы использовали режим R/G/B. И, честно говоря, этот цветовой режим отстой. 😅

Давайте поговорим о другом цветовом режиме: HSL .

HSL расшифровывается как Hue/Saturation/Lightness. Если вы когда-либо использовали палитру цветов, вы, вероятно, работали с этим цветовым режимом.

Вот живой пример:

Вот что представляет каждое значение:

  • Оттенок определяет, каким будет пигмент, где цвет попадает на цветовой круг.

  • Насыщенность управляет яркостью цвета.

  • Яркость определяет, насколько светлым или темным будет цвет.

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

Вот действительно волшебная вещь: что, если вместо усреднения значений RGB в наших градиентах мы усредним значения HSL?

Давайте попробуем:

Серой мертвой зоны больше нет, потому что мы больше не смешиваем значения R/G/B, мы смешиваем значения H/S/L.

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

Вот еще один пример, на этот раз смешивание цветов с разной насыщенностью и яркостью:

А вот те же самые цвета, но с использованием типичного смешивания RGB:

Большая разница, правда?

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

В соответствии с цветовым режимом HSL оба этих цвета имеют одинаковую «яркость»:

Не все видят цвета одинаково, но большинство людей скажут, что желтый кажется намного светлее синего, несмотря на то, что они имеют одинаковое значение «яркости». Однако HSL не заботится о том, как люди воспринимают цвета; он смоделирован после грубой физики, энергии и длин волн и тому подобного.

К счастью, есть другие цветовые режимы, которые делают учитывающими человеческое восприятие. Например, HCL похож на HSL, но создан по образцу человеческого зрения:

Какой цветовой режим лучше? Ну, это действительно зависит от того, какой эффект вам нужен! Мне нравится экспериментировать с множеством различных цветовых режимов, чтобы найти лучший для определенного градиента.

Ссылка на эту рубрику

Применение этих знаний

У меня есть хорошие и плохие новости. Начнем с плохих новостей.

CSS не дает нам возможности изменить цветовой режим, используемый при расчете градиента. Мы не можем «согласиться» на использование интерполяции HSL для заданного градиента, по крайней мере, пока. CSS Images Level 4 предоставляет способ указать «метод интерполяции цветов», но, насколько мне известно, он не очень широко поддерживается в браузерах.

Но есть и хорошие новости: мы можем обойти это ограничение, если будем немного хитрыми. 😈

Градиенты в CSS не должны ограничиваться только двумя цветами. Мы можем передать 3 цвета или 10 цветов или 100 цветов.

Во-первых, нам нужно вручную вычислить кучу промежуточных цветов. Мы сделаем это с помощью JavaScript, чтобы мы могли использовать любой цветовой режим, какой захотим (используя полезную библиотеку, такую ​​как chroma.js):

Затем мы возьмем эту коллекцию цветов и передадим каждое значение градиенту CSS. функция:

(Здесь мы используем линейные градиенты, но тот же трюк работает для радиальных и конических градиентов!)

Но подождите, не будет ли движок CSS по-прежнему использовать интерполяцию RGB для вычисления пробелов между каждого предоставленного цвета? Если мы не передаем сотен цветов, достаточно для каждого отдельного пикселя, мы все еще полагаемся на интерполяцию RGB!

Это правда, но, к счастью, это не имеет большого значения.

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

Например, вот градиент, в котором используются два очень похожих цвета:

Цвета настолько похожи, что интерполяция RGB не может их испортить.

Итак, наша хитрая уловка состоит в том, чтобы сгенерировать кучу средних цветов, используя пользовательский цветовой режим, и передать их все нашей функции градиента CSS. Движок CSS будет использовать интерполяцию RGB, но это не повлияет на конечный результат (по крайней мере, не настолько, чтобы это было заметно человеку).

Хорошо, теперь самое интересное. Давайте поговорим о том, как создавать эти градиенты. 😄

Ссылка на этот заголовок

Представляем «Генератор градиента»

Я создал инструмент, который поможет вам создавать пышные, красивые градиенты, которые вы можете использовать в CSS.

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

Настраивайте элементы управления до тех пор, пока вам не понравится результат, а затем скопируйте фрагмент кода CSS внизу. Прямо сейчас инструмент генерирует только линейные градиенты, но вы можете копировать/вставлять набор цветов CSS и использовать их также в радиальных и конических градиентах!

Посмотрите его здесь:
joshwcomeau.com/gradient-generator

Да, и еще кое-что: Если вам понравился этот стиль обучения с интерактивными виджетами и акцентом на первых принципах, вам понравится мой курс CSS , CSS для разработчиков JavaScript.

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

Если вам интересно, вы можете узнать больше здесь: https://css-for-js.dev/.

Ссылка на этот заголовок

Известный уровень техники

Я был вдохновлен на создание своего генератора градиентов, увидев эти два замечательных генератора градиентов:

  • Инструмент Vivid Gradient Generator от Эрика Кеннеди

  • 2 Polychroma

    13 красивых инструментов для создания градиентов, которые должен знать каждый веб-дизайнер 💯👍

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

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

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

    Веб-градиенты

    Бесплатная коллекция из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта. Просто скопируйте кросс-браузерный код CSS3 и используйте его в одно мгновение!

    Grabient

    Добавьте до 6 цветов, измените угол градиента с помощью современного пользовательского интерфейса.

    Градиенты пользовательского интерфейса

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

    HyperColor

    Подборка красивых CSS-градиентов Tailwind с использованием всего спектра цветов Tailwind CSS. Легко копируйте и вставляйте имена классов, CSS или даже сохраняйте градиенты в виде изображения.

    Король градиентов

    Просмотрите множество градиентов на основе цветовой темы. Также включает возможность создания градиента на основе цветов загруженного изображения. Возможность войти и сохранить избранное.

    CoolHue

    Попробуйте плагин Coolhue Gradient Palette. С его помощью вы можете напрямую получить доступ к палитре цветов градиента прямо из ваших любимых инструментов прототипирования, таких как Sketch App и Figma.

    GradientHunt

    Gradient Hunt — это бесплатная и открытая платформа для вдохновения цветом с тысячами модных цветовых градиентов ручной работы.

    CSS Gradient

    Генератор градиентов с современным пользовательским интерфейсом и множеством параметров настройки.

    Gradient Png

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

Comments
Leave Comment