Как пользоваться
- В разделе «Тип» выберите «Линейный», «Радиальный» или «Конический».
- Задайте «Угол» для линейного или конического градиента; для радиального выберите вариант в разделе «Форма».
- В разделе «Цветовые точки» задайте цвета и их позиции в процентах.
- Нажмите «+ Добавить точку», если нужен ещё один цвет.
- Нажмите «Копировать CSS» и вставьте строку background: …; в CSS-правило нужного элемента. Если нужна только функция градиента, например для inline-стиля, нажмите «Копировать значение».
Примеры
Затемнение фотографии под текст
Линейный, 180° · #000000 0%, непрозрачность 0% · #000000 100%, непрозрачность 80%
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
Фон первого экрана
Радиальный, эллипс сверху слева · #38BDF8 0% · #1E3A8A 100%
background: radial-gradient(ellipse at top left, #38BDF8 0%, #1E3A8A 100%);
Полосатый фон блока
Повторяющийся линейный, 45° · #F1F5F9 0% · #F1F5F9 10% · #CBD5E1 10% · #CBD5E1 20%
background: repeating-linear-gradient(45deg, #F1F5F9 0%, #F1F5F9 10%, #CBD5E1 10%, #CBD5E1 20%);
Советы
- Подберите точные цвета и проверьте контраст в инструменте «Коды цветов HTML».
- Проверьте градиент на странице в HTML-редакторе.
Частые вопросы
Почему повторяющийся градиент выглядит как обычный?
При включённой опции «Повторяющийся» повтор не виден, если последняя цветовая точка стоит на 100%. Переместите её ниже, например на 25%.
Какие форматы цветов можно вводить?
Поддерживаются HEX-коды #RGB, #RGBA, #RRGGBB и #RRGGBBAA; знак # необязателен. Альфа-канал в коде задаёт непрозрачность точки. Названия цветов, rgb() и hsl() в полях ввода не принимаются.
Почему CSS-код не меняется после ввода?
При ошибке поле выделяется красным, а код и предпросмотр сохраняют последний корректный градиент. Проверьте значения: угол должен быть целым числом от 0 до 360, позиции и непрозрачность — от 0 до 100.
Сколько цветов можно добавить в градиент?
Можно использовать от 2 до 8 цветовых точек. При восьми точках кнопка «+ Добавить точку» становится недоступной.
Сохраняются ли настройки градиента?
Последний корректный градиент сохраняется в localStorage вашего браузера и восстанавливается при следующем посещении. Нажмите «Сбросить», чтобы удалить сохранённые настройки и вернуть исходный градиент.