CSS Magic Gradient
TypeScript-библиотека для генерации CSS-градиентов — линейных, радиальных, конических — с пресетами, генераторами цветовой гармонии, утилитами доступности WCAG и хуками для Vue/React.
Когда это пригодится
Градиент, который в дизайн-макете выглядит гладким, в браузере может показывать грязные переходы и заметные полосы — css-magic-gradient считает переход через более точные цветовые пространства вместо кратчайшей прямой между двумя цветами, и на выходе таких полос не остаётся.
Фон должен сочетаться с фирменными цветами
Дизайн-система бренда задаёт один акцентный цвет — весь остальной градиент подбирается автоматически по цветовой гармонии вокруг него, вместо того чтобы вручную искать соседние оттенки на глаз.
Текст поверх градиента читается не в каждой точке
Светлый текст хорошо виден на тёмном краю градиента и теряется на светлом — контраст можно проверить сразу по всей длине перехода и автоматически сдвинуть цветовые остановки так, чтобы текст оставался читаемым везде.
Превью для соцсетей рисуется без браузера
Картинка для ссылки в соцсетях собирается на сервере при публикации статьи, а не рисуется вручную каждый раз — тот же градиент, что и на сайте, можно сразу отрисовать в обычный файл изображения, без браузера и без художника.
Нужна только генерация градиента, без лишнего фреймворка
Утилита используется в обычном TypeScript-скрипте или в другом фреймворке — 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.
Изолированные точки входа
Базовый пакет никогда не подтягивает Vue или React в бандл — фреймворк-специфичный код вынесен в отдельные подпути импорта, и если вам нужна только генерация градиентов, лишний код просто не попадёт в сборку. Библиотека tree-shakeable и помечена sideEffects: false.
Как это работает
Градиент, который не портит читаемость текста
createAccessibleGradient подбирает светлоту (или насыщенность) цветов так, чтобы белый текст оставался читаемым по всей длине градиента, а не только по краям — контраст проверяется по WCAG.
import { createAccessibleGradient } from 'css-magic-gradient'
const gradient = createAccessibleGradient('#3498db', '#ffffff', {
targetLevel: 'AA',
})
// Adjusts lightness (or saturation) in small steps until white text stays
// readable across the whole gradient — not just at its two endpoints,
// checked against real WCAG contrast ratios.
