Генератор CSS-градиентов — Бесплатно Онлайн
Создавайте красивые линейные, радиальные и конические CSS-градиенты с живым предпросмотром.
Who uses the Генератор CSS-градиентов?
- Frontend-разработчики, создающие фоновые градиенты для героев-секций и UI-компонентов.
- Дизайнеры, прототипирующие визуальные идентичности на основе градиентов и переходы фирменных цветов.
- Изучающие CSS, понимающие синтаксис градиентов через визуальный, интерактивный конструктор.
How the Генератор CSS-градиентов works
Выберите тип градиента: Linear, Radial или Conic.
Нажмите на образец цвета цветовой точки, чтобы изменить её цвет через выбор цвета.
Используйте ползунок рядом с каждой точкой, чтобы настроить её позицию, или нажмите «+ Add color stop» для новой.
Настройте угол (linear/conic), затем скопируйте CSS-код из панели вывода.
Tips & tricks
- Нужно как минимум 2 цветовые точки — кнопка удаления (×) появляется только когда их 3 или больше.
- Радиальные градиенты скрывают элемент управления углом, поскольку у центрированного кругового градиента нет направления для настройки.
- Точки всегда отображаются в порядке позиции в выходном CSS, независимо от порядка добавления.
- Выбор цвета не поддерживает альфа-канал/прозрачность — добавьте rgba() вручную в скопированном CSS, если нужна прозрачная точка.
Frequently Asked Questions
Какой синтаксис CSS для линейного градиента?
background: linear-gradient(направление, цвет1, цвет2). Пример: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Направление может быть углом (45deg) или ключевым словом (to right, to bottom right).
Как создать радиальный градиент?
background: radial-gradient(форма размер at позиция, цвет1, цвет2). Пример: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Этот инструмент генерирует центрированный круговой радиальный градиент.
Можно ли добавить больше двух цветовых точек?
Да. Нажимайте «+ Add color stop» столько раз, сколько нужно. У каждой точки свой выбор цвета и ползунок позиции, а точки автоматически сортируются по позиции в выходном CSS.
Как создать прозрачный градиент?
Используйте rgba() или hex с альфа-каналом для прозрачных точек. Пример: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) создаёт затемнение — часто используется как оверлей на изображениях героя для читаемости текста. Выбор цвета в этом инструменте не включает альфа-канал, так что отредактируйте скопированный CSS вручную для прозрачности.
Работает ли CSS-градиент во всех браузерах?
CSS-градиенты поддерживаются во всех современных браузерах (Chrome, Firefox, Safari, Edge, Opera). Префикс поставщика (-webkit-) строго не требуется для современных браузеров, хотя этот инструмент включает строку с префиксом -webkit- в вывод для поддержки более старых браузеров.
Is my data safe when using the Генератор CSS-градиентов?
Completely safe. The Генератор CSS-градиентов processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор CSS-градиентов output in commercial projects?
Yes. The Генератор CSS-градиентов is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор CSS-градиентов follow official standards?
Yes. The Генератор CSS-градиентов is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.