Генератор CSS-градиентов
Собирает свойство background с градиентом и сразу показывает результат на большом полотне. Три типа: линейный с углом, радиальный с формой и конический с поворотом. Цветовых точек сколько угодно — каждую можно двигать по шкале, менять цвет и прозрачность. Готовый код лежит под предпросмотром и копируется одной кнопкой. Обратный ход тоже работает: вставьте чужой градиент из чужого сайта, и он разберётся на точки, которые дальше можно править.
Предпросмотр
Настройки
Цветовые точки
Готовый CSS
Разобрать чужой градиент
Как пользоваться
- Линейный подходит для фонов и кнопок, радиальный — для подсветки, конический — для диаграмм и колец.
- Точку добавляют кнопкой, двигают ползунком позиции, удаляют крестиком. Минимум две.
- Угол для линейного, форму и центр для радиального, стартовый поворот для конического.
- Готовое свойство background под предпросмотром. Рядом кнопка копирования.
Частые вопросы
Чем градиент отличается от картинки
Градиент — это функция, которую браузер рисует сам, поэтому он ничего не весит, масштабируется без потери качества и перерисовывается под любой размер блока. Картинка того же вида займёт десятки килобайт и станет мыльной на ретине. Для плавных переходов между цветами картинка не нужна почти никогда.
Как задаётся угол в линейном градиенте
В CSS ноль градусов — это снизу вверх, и дальше по часовой стрелке: 90deg — слева направо, 180deg — сверху вниз. Это отличается от привычной математической записи, где ноль смотрит вправо. Вместо угла можно писать словами: to right, to bottom left.
Почему в градиенте появляется серая полоса
Так проявляется интерполяция через прозрачность. Запись transparent означает rgba(0,0,0,0) — то есть чёрный с нулевой непрозрачностью, и на переходе к цветной точке браузер идёт через полупрозрачный чёрный. Лечится заменой transparent на тот же цвет с нулевой альфой: вместо to transparent пишите to rgba(255,255,255,0).
Что такое цветовые остановки без позиции
Если позиции не указаны, браузер расставляет точки равномерно: две по краям, три — по краям и в середине. Позиция нужна, когда переход должен быть резким или смещённым. Две точки с одинаковой позицией дают чёткую границу без перехода — так рисуют полосы.
Работает ли конический градиент везде
conic-gradient поддерживается всеми актуальными браузерами с 2020 года. В старых версиях он просто не отрисуется, поэтому под ним стоит оставить обычный фоновый цвет запасным свойством — браузер, который не понял конический, возьмёт предыдущее объявление.
Можно ли наложить несколько градиентов
Да, свойство background принимает список через запятую: первый в списке лежит сверху. Чтобы нижние были видны, у верхних должны быть полупрозрачные участки. Этот приём даёт сетки, полоски и текстуры без единой картинки.
Данные куда-то отправляются
Нет, всё собирается в браузере.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.