Генератор CSS-градиентов
Смешивайте до 8 цветовых точек в линейные, радиальные или конические градиенты — перетаскивайте, настраивайте и копируйте готовый к продакшену код.
Как использовать генератор градиентов
- Выберите тип градиента: линейный, радиальный или конический.
- Кликните на полосе градиента, чтобы добавить цветовую точку; перетаскивайте точки вдоль полосы для изменения позиции.
- Выберите точку, чтобы изменить её цвет, непрозрачность и точную позицию (до 8 точек).
- Настройте угол (линейный/конический), форму (радиальный) или центральную точку, пока не понравится результат.
- Скопируйте CSS-объявление background или переключитесь на вкладку Tailwind для utility-класса.
Об этом генераторе градиентов
CSS-градиенты — это изображения, генерируемые браузером: linear-gradient рисует вдоль прямой линии, radial-gradient расходится от центральной точки, а conic-gradient обводит вокруг центра, как цветовое колесо. Каждый принимает две или более цветовых точек с необязательными позициями. Писать их вручную — особенно с множеством точек или rgba-прозрачностью — медленно и чревато ошибками.
Этот генератор рендерит ваш градиент вживую, пока вы перетаскиваете цветовые точки по полосе, вращаете угол или двигаете центральную точку. Начните с одного из 10 отобранных пресетов (закат, океан, конфета, радуга…) и сделайте его своим. Вывод — одно объявление background, работающее во всех современных браузерах; вкладка Tailwind оборачивает тот же градиент в синтаксис произвольных значений для utility-first рабочих процессов.
FAQ по градиентам
Сколько цветовых точек можно добавить?
До 8 точек. Кликните в любом месте полосы градиента, чтобы вставить новую точку в этой позиции — её цвет автоматически интерполируется из соседних. Перетаскивайте точки для изменения позиции, выбирайте для редактирования цвета и непрозрачности и удаляйте кнопкой «Удалить точку» (минимум 2 точки сохраняются).
В чём разница между линейным, радиальным и коническим градиентами?
Линейные градиенты переходят между цветами вдоль прямой линии под заданным углом. Радиальные расходятся от центральной точки кругом или эллипсом. Конические вращают цвета вокруг центральной точки (как круговая диаграмма или цветовое колесо) и поддерживают начальный угол «from».
Как сделать градиент с прозрачностью?
Выберите любую цветовую точку и уменьшите её слайдер непрозрачности. Генератор выдаст rgba() цвета для этой точки, так что можно затухать до прозрачного или смешивать градиент с фоновым изображением или цветом под ним.
Как обратить направление цветов?
Нажмите кнопку «Обратить» — она зеркалирует каждую позицию точки (0% становится 100% и т.д.), переворачивая градиент без изменения угла. Для линейных градиентов можно также повернуть слайдер угла на 180°.
Можно ли использовать это как background-image вместо background?
Да. Сгенерированное значение (linear-gradient(...), radial-gradient(...) или conic-gradient(...)) является