Блог Тильды

Как создать красивый градиент в Zero Block

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

Лучше всего в градиенте сочетаются цвета, находящиеся недалеко друг от друга на цветовом круге. Например, фиолетовый и синий или разные оттенки синего. Противоположные цвета, например, фиолетовый и жёлтый, смешиваются с серым переходом.

Почему так происходит?

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

💫 Как миновать серую зону при создании градиента?

Добавьте несколько промежуточных оттенков с такой же насыщенностью — например, оранжевый, красный, розовый. Смешение должно происходить по кривой в обход серой зоны — так градиент будет выглядеть более естественно и без грязного смешения. Количество промежуточных оттенков зависит от выбранных вами основных цветов, но для далеко расположенных на круге точек нужно не меньше 3-4 дополнительных цветов.

Вы можете подбирать цвета самостоятельно или использовать один из генераторов, которые создают градиенты по такой схеме, например 👉https://learnui.design/tools/gradient-generator.html.

💫 Как добавить градиент с несколькими цветами в Zero Block?

Кликните на нужный элемент и перейдите в Настройки → Background Color → и выберите Linear или Radial. Задайте два основных цвета. Затем наведите курсор на панель с градиентом, чтобы появилась иконка плюса и вы могли добавить ещё один цвет. Повторите со всеми промежуточными цветами. Чтобы удалить цвет, зажмите его и потяните вниз.

Подробнее о градиентах в Zero Block 👉 https://blog.tilda.cc/gradients-in-zero-block

Made on
Tilda