Входные данные
Подготовка рабочей области…
Как пользоваться
- Выберите линейный или радиальный тип и два цвета.
- Настройте позиции цветов и угол линейного градиента.
- Скопируйте CSS и примените декларацию background к элементу.
Настройка градиента CSS
Градиент CSS создаёт фон из цветов без отдельного файла изображения. Он масштабируется вместе с карточкой, баннером или разделом и остаётся редактируемым в CSS.
Генератор работает с двумя цветами. Выберите линейное направление или круговой радиальный градиент по центру и задайте начало и конец перехода.
Направление и позиции цветов
Угол относится только к линейному градиенту. Радиальный режим использует круг по центру элемента без настройки угла.
Позиции задаются от 0% до 100%. Их сближение сужает переход, а одинаковая позиция создаёт резкую границу цветов.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Линейный градиент с двумя цветовыми точками, указанными цветами и углом.
Что показывает предпросмотр
Предпросмотр напрямую использует сгенерированный CSS. Пропорции могут отличаться от целевого элемента, особенно у радиального градиента.
Первая точка не может находиться после второй. Редактор создаёт один слой с двумя цветами; дополнительные точки и слои можно добавить в таблице стилей.
Применение декларации
Скопированный текст начинается с background:. Примените его к нужному селектору и проверьте фоновые изображения, цвета и сокращённые свойства, которые он может заменить.
Текстовый ввод до 1 MiB. Преобразования CSS и HTML выполняются в Worker с ограничением 30 секунд. Инструменты цвета используют sRGB; созданные стили служат предпросмотром и требуют проверки в вашем макете.
Частые вопросы
Можно ли добавить третий цвет?
Здесь поддерживаются две точки. Скопируйте CSS и при необходимости добавьте другие цвета через запятую.
Почему в радиальном режиме нет угла?
Круговой радиальный градиент расходится от центра. Угол нужен только для линейного градиента.
Можно ли получить резкую границу?
Да. Задайте обеим цветовым точкам одинаковую позицию, чтобы убрать плавный переход.
Создаётся ли файл изображения?
Нет. Копируется декларация background, по которой браузер рисует градиент.
Почему на моём элементе градиент выглядит иначе?
На результат влияют размеры и пропорции элемента. Проверяйте его на реальном элементе, а не только в карточке предпросмотра.