Генератор градиентов CSS
Генерирует CSS-градиенты.
Об этом инструменте
Генератор собирает линейный градиент из двух точек, показывает его в предпросмотре и позволяет скопировать как обычный CSS, так и произвольный класс фона Tailwind.
Как пользоваться
Задайте два цвета и угол, постройте полосу, оцените результат в предпросмотре и скопируйте свойство background или класс bg-[linear-gradient(…)]. В проекте на Tailwind короче выглядит именно произвольный класс.
Пример
По умолчанию показан диагональный переход от небесно-голубого к зелёному.
Ввод
135deg · #0ea5e9 → #22c55eВывод
background: linear-gradient(135deg, #0ea5e9, #22c55e);Совет
Фирменные градиенты с большим числом точек удобнее держать в CSS-переменных.
Полезно знать
Можно добавить больше двух цветовых остановок?
Генератор строит линейный градиент с двумя остановками. Для фирменных градиентов с несколькими остановками скопируйте результат и добавьте остановки вручную или храните их в переменных CSS.
Как использовать результат для Tailwind?
Вставьте класс bg-[linear-gradient(…)] в элемент. Tailwind читает его как произвольное значение, менять конфигурацию не нужно.