CSS Magic Gradient
TypeScript-библиотека для генерации CSS-градиентов — линейных, радиальных, конических — с пресетами, генераторами цветовой гармонии, утилитами доступности WCAG и хуками для Vue/React.
Генерация градиентов всех типов
Создавайте линейные, радиальные и конические градиенты с автоматической яркостью, явными цветовыми остановками или на основе цветовых гармоний. Поддерживаются CSS-переменные, CSS Color Level 4 (интерполяция в Oklch, Lab, HSL) и повторяющиеся варианты. Все настройки гибко конфигурируются под любую задачу.
Гармонии, палитры и пресеты
Мгновенно получайте комплементарные, триадные, аналогичные, тетрадные и другие гармоничные схемы с интерполяцией в Oklab/LCH. Стройте палитры оттенков, теней и тонов. Используйте 15 готовых пресетов (закат, океан, северное сияние и другие) для быстрого старта.
Доступность по WCAG
Анализируйте контраст текста на градиенте с помощью 11-точечной выборки, определяйте уровень WCAG и находите проблемные участки. Функция автоматической корректировки подстраивает остановки градиента, чтобы достичь целевого уровня AA или AAA, регулируя яркость, насыщенность или оба параметра.
Экспорт в Canvas и работа с CSS-переменными
Рендерите градиенты в CanvasGradient, ImageData или DataURL для генерации изображений и Open Graph-карточек. Извлекайте и подставляйте значения CSS-переменных в градиентных строках. Все утилиты работают как в браузере, так и на сервере (с поддержкой canvas-библиотек).
Интеграция с Vue 3 и React
Используйте 15 реактивных хуков для Vue 3 (ComputedRef) и React (useMemo) — все они SSR-безопасны и автоматически обновляются при изменении входных параметров. Vue-хуки доступны через плагин, React-хуки импортируются из отдельного подпути. Единственная зависимость — color-value-tools.