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

Что такое Генератор CSS-градиентов?

Генератор CSS-градиентов — это бесплатный инструмент в браузере для веб-дизайнеров и фронтенд-разработчиков, которые хотят создавать градиенты визуально, а не писать синтаксис вручную. Выберите линейный, радиальный или конический — с необязательным повторяющимся вариантом — затем редактируйте цветовые переходы на перетаскиваемой полосе предпросмотра или в строках по каждому переходу с полями HEX-цвета и позиции. Радиальные градиенты предлагают форму круга/эллипса, ключевое слово размера (closest-side, closest-corner, farthest-side, farthest-corner) и центр at X% Y%, а конические принимают начальный угол и центр. Вы можете наложить несколько слоёв градиента в один фон через запятую, сгенерировать случайный градиент, применить готовые палитры, повернуть оттенок каждого перехода и скопировать готовое к вставке правило background.

Как пользоваться Генератор CSS-градиентов

1. Выберите тип градиента — линейный, радиальный или конический — и включите «Повтор» в параметрах для повторяющегося узора.
2. Перетаскивайте переходы вдоль полосы предпросмотра, чтобы менять их положение, щёлкните по пустому месту полосы, чтобы добавить переход, или дважды щёлкните по переходу, чтобы удалить его.
3. Точно настраивайте каждый переход полями HEX-цвета и позиции или используйте пипетку (где поддерживается), чтобы взять цвет с экрана.
4. Для радиальных градиентов задайте форму (круг или эллипс), ключевое слово размера и центр X/Y; для конических — начальный угол и центр.
5. Добавляйте слои, чтобы наложить градиенты в один фон, попробуйте «Случайно», примените палитру или поверните все оттенки сразу.
6. Скопируйте сгенерированное правило CSS background и вставьте его в таблицу стилей.

Примеры

Линейный, 90deg, #4f86f7 на 0% и #9333ea на 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Радиальный, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Слой 1 линейный 90deg; Слой 2 радиальный circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Часто задаваемые вопросы

Какие типы градиентов и параметры поддерживаются?

Линейные, радиальные и конические градиенты, каждый с необязательным повторяющимся вариантом. Радиальный добавляет форму круга/эллипса, ключевое слово размера (closest-side, closest-corner, farthest-side, farthest-corner) и центр at X% Y%; конический добавляет начальный угол и центр. Также можно наложить несколько слоёв в один фон.

Как работает перетаскиваемая полоса переходов?

Перетащите любой переход вдоль полосы, чтобы изменить его положение, щёлкните по пустой части полосы, чтобы вставить новый переход с интерполированным цветом, и дважды щёлкните по переходу, чтобы удалить его (сохраняется минимум два). У каждого перехода под полосой также есть поля HEX-цвета и позиции.

Можно ли взять цвет с экрана?

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

Что делают «Случайно», палитры и поворот оттенка?

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

Загружаются ли мои цвета или CSS куда-либо?

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