Как пользоваться
- 1Выберите тип: линейный, радиальный или конический.
- 2Задайте угол, а для радиального и конического — форму и положение центра.
- 3Нажмите на полосу, чтобы добавить цветовую точку, перетащите маркер или задайте цвет, позицию и непрозрачность вручную.
- 4Скопируйте код CSS или значение для Tailwind; можно начать с одного из 16 готовых градиентов.
Три типа градиентов
linear-gradient меняет цвет вдоль прямой под заданным углом (0° — снизу вверх, 90° — слева направо). radial-gradient расходится от центра кругом или эллипсом, центр выбирается из девяти положений. conic-gradient поворачивает цвета вокруг центра — так делают круговые диаграммы и цветовые колёса; начальный угол задаётся параметром from. Все три типа поддерживаются современными браузерами.
Цветовые точки и прозрачность
У каждой точки есть цвет (палитра или HEX), позиция в процентах и непрозрачность — при значении меньше 100 % цвет записывается в формате #RRGGBBAA, а шахматный фон в предпросмотре показывает прозрачность. Минимум две точки, лишние удаляются крестиком; кнопка «Развернуть» меняет порядок цветов на обратный.
Готовый код: CSS и Tailwind
CSS выводится в две строки: сначала сплошной background с цветом первой точки — запасной вариант, затем сам градиент. Для Tailwind CSS генерируется arbitrary value вида bg-[linear-gradient(135deg,#c6f04f_0%,#4fb3f0_100%)] — пробелы заменены подчёркиваниями, класс можно сразу вставить в разметку.
Частые вопросы
Как сделать градиент в CSS?
Используйте свойство background с функцией linear-gradient, например background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Генератор создаёт такой код автоматически.
Как сделать прозрачный градиент?
Уменьшите непрозрачность нужной точки — цвет будет записан в формате #RRGGBBAA, и через градиент станет виден фон.
Как использовать градиент в Tailwind?
Скопируйте класс из блока Tailwind, например bg-[linear-gradient(...)], и добавьте его к элементу.
Чем radial-gradient отличается от conic-gradient?
Радиальный меняет цвет от центра к краям, конический — по кругу вокруг центра, как стрелка часов.
Результаты не радуют?
Обратитесь в Webin Agency: быстрые сайты с SEO-оптимизацией, интернет-магазины и ведение Google Ads.