Когда использовать конический градиент?

Конические градиенты идеальны для эффектов круговой диаграммы, цветовых колёс и абстрактных вращающихся фонов. Они огибают центральную точку — чего не могут сделать ни линейные, ни радиальные градиенты. Поддержка браузеров теперь надёжна в современных движках.

Как избежать мутной середины в двухцветных градиентах?

Добавьте промежуточную точку с перцептивно сбалансированным цветом или выберите цвета с похожей светлотой. Смешение дополнительных цветов через их RGB-середину даёт серый — выбор середины вручную в OKLCH позволяет этого избежать.

Можно ли экспортировать в другие форматы?

Вывод — стандартный CSS, работающий напрямую в любом веб-контексте. Для дизайн-инструментов скопируйте отдельные цветовые точки и воспроизведите градиент в Figma или Sketch.

Поддерживается ли прозрачность?

Да. Любая цветовая точка может иметь альфа-канал. Полезно для исчезания краёв в фон или наслоения градиентов с полупрозрачными точками.

Отправляются ли мои данные куда-либо?

Нет. Генерация выполняется полностью в вашем браузере.

Генератор CSS-градиентов — Бесплатный онлайн-инструмент

Приватность по умолчанию — работает полностью в вашем браузере

Создавайте линейные и радиальные CSS-градиенты визуально прямо в браузере. Toova позволяет размещать цветовые точки, настраивать углы, переключать типы и экспортировать CSS для вставки — всё без загрузки чего-либо на сервер.

Линейные, радиальные и конические градиенты

Линейные градиенты движутся вдоль прямой оси, определяемой углом или ключевым словом направления. Радиальные градиенты расширяются от центральной точки. Конические градиенты огибают угол — идеально для фонов в стиле круговой диаграммы или эффектов цветового колеса. Toova предоставляет все три с визуальными элементами управления, чтобы создавать нужный градиент без запоминания каждого варианта CSS-синтаксиса.

Цветовые точки и плавность

Перетаскивайте цветовые точки по полосе градиента для управления началом и концом каждого цвета. Добавляйте сколько угодно точек — Toova не ограничивает. Используйте предустановки плавности для введения нелинейной интерполяции, избегающей мутной серой середины, которая преследует простые двухцветные градиенты. CSS-вывод использует стандартные свойства, поддерживаемые в каждом современном браузере.

Генерация только в браузере

Каждый градиент генерируется локально в вашем браузере. Выбранные цвета, размещённые точки, итоговый CSS — ничего из этого не покидает страницу. Это излишество для градиентов, но означает, что инструмент быстрый и надёжный, и страница работает офлайн после первой загрузки. Вкладка «Сеть» останется пустой при использовании.

Часто задаваемые вопросы

Когда использовать конический градиент?: Конические градиенты идеальны для эффектов круговой диаграммы, цветовых колёс и абстрактных вращающихся фонов. Они огибают центральную точку — чего не могут сделать ни линейные, ни радиальные градиенты. Поддержка браузеров теперь надёжна в современных движках.
Как избежать мутной середины в двухцветных градиентах?: Добавьте промежуточную точку с перцептивно сбалансированным цветом или выберите цвета с похожей светлотой. Смешение дополнительных цветов через их RGB-середину даёт серый — выбор середины вручную в OKLCH позволяет этого избежать.
Можно ли экспортировать в другие форматы?: Вывод — стандартный CSS, работающий напрямую в любом веб-контексте. Для дизайн-инструментов скопируйте отдельные цветовые точки и воспроизведите градиент в Figma или Sketch.
Поддерживается ли прозрачность?: Да. Любая цветовая точка может иметь альфа-канал. Полезно для исчезания краёв в фон или наслоения градиентов с полупрозрачными точками.
Отправляются ли мои данные куда-либо?: Нет. Генерация выполняется полностью в вашем браузере.