Создайте фон CSS из двух цветов с выбранным углом. Используйте градиент для раздела, карточки или кнопки.
Как пользоваться
Выберите начальный и конечный цвета. Задайте угол от 0 до 360, получите результат и вставьте декларацию фона в CSS.
Пример
Угол 90 направляет переход вправо, а 180 вниз. Изменение угла меняет направление при тех же цветах.
Вопросы и ответы
Можно ли добавить промежуточные цвета?
Генератор использует два цвета. Дополнительные точки перехода добавьте вручную в CSS.
Связанные инструменты
Практическая задача
Сначала выберите два крайних цвета, затем угол. Проверьте текст на самых светлых и тёмных участках. Удачный пустой образец может сделать заголовок нечитаемым у края.
Дополнительный вопрос
Градиент меняет размер элемента?
Нет. Он задаёт фон. Размеры, отступы и расположение определяются правилами элемента в конечной таблице стилей.
Настройки и форматы
| Поле | Значения |
|---|---|
| Начальный цвет | Начальное значение: #2196f3 |
| Конечный цвет | Начальное значение: #e91e63 |
| Угол | Начальное значение: 90; границы: 0 / 360 |
Детали для проверки результата
| Деталь | Пояснение |
|---|---|
| Каскад CSS | Один селектор может повторяться намеренно. Результат зависит от порядка, специфичности, медиазапросов и наследования. Короткая и аккуратная таблица стилей всё равно требует проверки на странице. |
| Контраст цветов | Для читаемого текста нужен достаточный контраст переднего плана и фона. Красивые цвета не гарантируют доступность. Проверяйте размер, насыщенность шрифта и реальный фон вместе. |
| Каналы RGB | RGB описывает красный, зелёный и синий каналы света. В целочисленной форме каждый принимает значение от 0 до 255. Шесть цифр HEX записывают те же каналы по две цифры на канал. |
| Значения HSL | HSL разделяет оттенок, насыщенность и светлоту. Это удобно для вариантов одного цвета, но процент светлоты не равен воспринимаемому контрасту и не подтверждает доступность. |
| Прозрачность и фон | Полупрозрачный цвет смешивается с фоном. Одно значение выглядит по разному на белом, чёрном и изображении. Оценивайте конечное сочетание, а не отдельный передний цвет. |
| Границы предпросмотра | Ограниченный просмотр блокирует скрипты, внешние изображения, шрифты и другие ресурсы. Поэтому он отделён от активного поведения страницы, но не воспроизводит любой рабочий макет точно. |
| Пиксели и текст | Изображение хранит пиксели, а не текстовый документ для поиска. Картинку сложнее искать, выделять, переводить и читать вспомогательными средствами. Для важных сведений сохраните текстовую альтернативу. |
| Размеры изображения | Размер файла и число пикселей являются разными показателями. Сжатая картинка может требовать много памяти при открытии. Для подготовки проверяйте и разрешение, и объём файла. |