CSS Magic Gradient
TypeScript library for generating CSS gradients — linear, radial, conic — with presets, color harmony generators, WCAG accessibility utilities, and Vue/React hooks.
All‑type gradient generation
Create linear, radial, and conic gradients with auto‑brightness, explicit color stops, or color harmony‑based stops. Support for CSS variables, CSS Color Level 4 interpolation (Oklch, Lab, HSL), and repeating variants. All settings are flexibly configurable for any task.
Harmonies, palettes, and presets
Instantly generate complementary, triadic, analogous, tetradic, and other harmonic schemes with Oklab/LCH interpolation. Build tints, shades, and tones palettes. Use 15 ready‑to‑use presets (sunset, ocean, aurora, and more) for a quick start.
WCAG accessibility
Analyze text contrast on gradients with 11‑point sampling, determine WCAG level, and locate problematic spots. The auto‑adjustment function fine‑tunes gradient stops to meet AA or AAA targets by adjusting lightness, saturation, or both.
Canvas export and CSS variable utilities
Render gradients to CanvasGradient, ImageData, or DataURL for image generation and Open Graph cards. Extract and substitute CSS variable values in gradient strings. All utilities work both in the browser and on the server (with canvas library support).
Vue 3 and React integration
Use 15 reactive hooks for Vue 3 (ComputedRef) and React (useMemo) — all SSR‑safe and auto‑update when inputs change. Vue hooks are available via a plugin, React hooks are imported from a separate subpath. The only runtime dependency is color‑value‑tools.