Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Генератор градиентов CSS создаёт объявление background из двух цветов. Выберите Линейный, чтобы цвета перетекали вдоль линии под любым углом, или Радиальный, чтобы они расходились кругом от центра к краям. Превью обновляется при каждом движении элементов управления, а в поле вывода появляется готовая к вставке строка, например background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
В линейном градиенте угол задаёт направление: 0deg — снизу вверх, 90deg — слева направо, 180deg — сверху вниз. Радиальный градиент игнорирует угол и использует circle, поэтому первый цвет оказывается в центре. Обе формы поддерживаются всеми современными браузерами без вендорных префиксов, так что сгенерированная строка работает как есть.
Когда использовать
- Нужно сделать для hero-секции или кнопки призыва к действию ненавязчивый двухцветный фон.
- Нужно заменить фоновое изображение с градиентом на CSS, чтобы страница загружала на один файл меньше.
- Вы хотите сравнить пары фирменных цветов бок о бок, прежде чем закрепить их в дизайн-системе.
- Нужно создать мягкое радиальное свечение за логотипом или иллюстрацией.
Пример
Ввод
Тип: Линейный
Угол: 90
Цвета: #3b82f6, #8b5cf6Вывод
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Вопросы об этом инструменте
Как добавить третий цвет?
Допишите его в список внутри функции через запятую: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). Можно также задать каждому цвету позицию, например #8b5cf6 40%, чтобы управлять тем, где происходит переход.
Останется ли текст читаемым на градиенте?
Проверьте цвет текста относительно обоих концов градиента с помощью инструмента проверки контраста цвета. Если один из концов не проходит проверку, затемните его или добавьте под текст полупрозрачную подложку.
Можно ли использовать градиент для рамки или заливки текста?
Да, с помощью дополнительного CSS. Для текста задайте градиент в background, затем добавьте background-clip: text и color: transparent. Для рамок свойство border-image принимает ту же функцию градиента.
Почему на моём градиенте видны полосы?
Полосы (бандинг) появляются, когда два похожих цвета растянуты на большую площадь. Выберите цвета, которые сильнее отличаются друг от друга, уменьшите область или добавьте промежуточную точку, чтобы каждый шаг перехода стал меньше.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.