Градиенты

Войти

С 0 до Middle+Другие курсы

Избранные

Mesh Gradients

Бесплатная коллекция сетчатых градиентов.

Градиенты

CSS Gradient Generator

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

Градиенты

Gradienta

Многоцветные CSS градиенты. Можно сохранять в CSS или JPG.

Градиенты

Mesh-Y

Бесплатный генератор сетчатых градиентов.

Градиенты

Gradient Generator by Learn UI Design

Сервис-генератор чистых градиентов.

Градиенты

Color Morph

Сервис-генератор градиентов в SVG и CSS.

Градиенты

Blend

Простой сервис для удобной генерации симпатичных градиентов для веба.

Градиенты

Gradient Animator

Генератор анимированных CSS-градиентов

Градиенты

Scale

Простой и гибкий генератор градиентных палитр

Градиенты

Ffflux

Генератор SVG для создания плавных градиентных фонов, которые выглядят органично и напоминают движение.

Градиенты

Ingradients

Коллекция mesh-градиентов в SVG, JPG, PNG и Figma.

Градиенты

CSS Gradient Editor

Настраиваемый генератор градиентов. Результат можно скопировать в html и CSS.

Градиенты

Gradex

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

Градиенты

Piggment

Сервис для генерации палитр и градиентов, а также проверкт контраста.

Градиенты

Ruri

Сервис, который помогает создавать различные градиентные сплайны с последующим экспортом в PNG. Есть плагин для Figma.

Градиенты

Grabient

Ресурс с набором готовых градиентов и с возможностью их изменить.

Градиенты

Остальные

Free Mesh Gradient

Коллекция их 100 готовых градиентов, доступны в форматах eps, jpeg, png

Градиенты

ColorSpace

Полноэкранный градиентный инструмент с высоко визуальным веб-сайтом.

Градиенты

Css Gradient

Генератор, в котором вы можете выбрать до трех цветов и создать собственный градиент.

Градиенты

UI Gradients

Генератор готовых градиентов, при каждой перезагрузке новый градиент.

Градиенты

Gradient Magic

Библиотека интересных и уникальных градиентов CSS.

Градиенты

Gradihunt

Простой генератор градиентов.

Градиенты

Design Gradients

Библиотека красивых градиентов для ващего проекта.

Градиенты

Conic.css

Коллекция простых градиентов

Градиенты

WebGradients

Наборы градиентов с возможности копирования css

Градиенты

Noise&Gradient

Генератор многоцветных градиентов с шумной текстурой

Градиенты

Easy Gradient Generator

Генератор градиентов для веба

Градиенты

Mesh-Y

Генератор градиентов

Градиенты

Gradient Generator by Learn UI Design

Генератор градиентов

Градиенты

Hue Tools

Набор онлайн-сервисов для работы с цветом: градиентные палитры, смешивание, модификация.

Градиенты

Color Morph

Сервис-генератор градиентов в SVG и CSS

Градиенты

Bg-painter

Веб-инструмент для создания фонов с разными эффектам, в том числе с эффектами «текучих градиентов».

Градиенты

Color by Fardos

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

Градиенты

Glitch Art Generator

Онлайн генератор глитч эффектов.

Градиенты

Josh Comeau

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

Градиенты

Color Designer

Сервис для генерации палитр с наборами оттенков

Градиенты

Angry tools

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

Градиенты

Flutter

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

Градиенты

Colorffy

Генератор трехцветных градиентов css

Градиенты

Gradients.app

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

Градиенты

Tailwind Gradient Generator

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

Градиенты

Сервисы для дизайнеров

Градиенты

Подбор цвета

Сервисы UX

Фриланс-биржи

Инфографика

Прототипирование

Интересное для дизайнеров

Книги

Фильмы

Вдохновение

Кириллические шрифты

Статьи по дизайну

Бесплатные курсы

Практические уроки с арт-директором

Вакансии

Создание красивых градиентов на 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

Color Gradient — лучший генератор градиента CSS.

Конический градиент проходит по 360-градусному контуру с несколькими цветами, расположенными вдоль этой линии. Цвета переходят вокруг центральной точки и постепенно переходят от одного к другому. Conic-gradient() — это функция CSS, которую необходимо указать в свойстве background-image.

Цветовой градиент — это бесплатный инструмент для создания градиентов css. Этот инструмент поддерживает полную спецификацию фона css. С помощью цветового градиента вы можете легко создавать простые градиенты, а также гораздо более сложные типы градиентов, такие как узоры и радиальные градиенты. На этом веб-сайте также есть несколько интересных статей о CSS-трюках (включая градиенты), о которых вы, возможно, еще не знали.

Спецификация CSS определяет конический градиент следующим образом: background-image: conic-gradient([ from ]? [ at ]?, color-stop-list>) Conic-gradient определяет тип градиента. Это также может быть линейный градиент радиального градиента. При желании вы можете указать линию, по которой должен следовать градиент, задав угол или аргумент стороны или угла.

Самый простой сценарий создаст градиент от одной точки к другой, линия градиента будет идти «круглосуточно» с резким переходом между двумя цветами на одном участке и плавным переходом на другом. фоновое изображение: конический градиент (#A100FFFF, #119CFDFF)

Установив угол в качестве первого аргумента, вы можете указать начальную точку, из которой начинается градиент. Этот аргумент задается в градусах в диапазоне от 0 до 360 градусов. Однако вы также можете использовать «рад», «поворот» или «град» в качестве значения единицы измерения для свойства угла. фоновое изображение: конический градиент (от 36 градусов, #A100FFFF, #119CFDFF)

Аргумент position сообщает браузеру, где отображать центральную точку конического градиента. Например, если вы укажете это на 0px 0px, центральная точка будет в левом верхнем углу. Для получения дополнительной информации оформите заказ значение позиции. конический градиент (от 36 градусов при 20% 80%, #A100FFFF, #119CFDFF)

Определите несколько цветовых остановок, добавив остановку в список угловых цветовых остановок. Одно значение состоит из значения цвета, за которым следует одно или два необязательных положения остановки. Это может быть указано в свойстве угла. Первое свойство угла указывает начальную точку, а второе значение определяет конечную точку. При исключении значений угла цвета будут равномерно распределены по доступному пространству. фоновое изображение: конический градиент (от 36 градусов при 20% 80%, #A100FFFF 0%, #000000 25%, #119CFDFF 30%)

Указав вторую точку остановки цвета, вы можете создавать резкие переходы между цветами. background-image: conic-gradient(from 36deg at 20% 80%, #A100FFFF 0% 25%, #000000 25% 30%, #119CFDFF 30% 50%;

Ознакомьтесь с нашим потрясающим генератором градиентов. Это просто и использовать и имеет много сложных функций градиента css

Перейти к генератору

Все о CSS-градиентах

Статья

CSS-градиент

Что такое градиент CSS? Какие градиенты можно создать в CSS? Можете ли вы сложить несколько слоев градиентов?

Статья

Линейный градиент

Это, пожалуй, самый распространенный градиент. Линейный градиент следует прямому пути от одной точки к другой. В этой статье показано, как определить линейный градиент CSS.

Статья

Радиальный градиент

Он излучает цвета изнутри или снаружи внутрь. Вам решать! Прочитайте, как определить радиальный градиент CSS.

Статья

Конический градиент

Конический градиент. Он излучает свои цвета по часовой стрелке. Может быть, вы можете создать интересные часы с ним?

Вскоре!

Шаблоны градиента CSS

Комбинируя линейный и радиальный градиенты, вы можете создавать довольно интересные узоры. Важным фактором является свойство background-size.

Вскоре!

Расширенные градиенты

Простой градиент из точки А в точку Б может быть довольно скучным, не так ли? В этой статье показано, как создавать несколько слоев градиентов, объединяя их в более интересные и сложные градиенты.

No related posts.