VueCraft NPM

CSS Magic Gradient ​

TypeScript library for generating CSS gradients — linear, radial, and conic. Includes gradient presets, color harmony generators, WCAG accessibility utilities, CSS variable support, canvas export, Vue 3 reactive hooks, and React hooks — with a single runtime dependency.

Features ​

  • createLinearGradient — linear (and repeating) gradients from a single base color or explicit color stops; accepts hex, rgb(), hsl(), named CSS colors, and CSS variables; CSS Color Level 4 interpolation with in oklch / lab / hsl
  • createRadialGradient — radial gradients in auto-brightness, explicit stops, multi-layer, or color-harmony mode; circle / ellipse, custom size and position
  • createConicGradient — conic gradients with hue-rotation, color-scale, harmony, or explicit stops; createRainbowConicGradient for a full-spectrum rainbow in one call
  • Color harmony generators — createComplementaryGradient, createTriadicGradient, createAnalogousGradient, createTetradicGradient, createSplitComplementaryGradient — all backed by color-value-tools for perceptually uniform interpolation
  • Palette generators — createTintGradient, createShadeGradient, createToneGradient — Oklab-based tints, shades, and tones
  • 15 gradient presets — sunsetGradient, oceanGradient, auroraGradient, and 12 more ready-to-use gradient strings
  • Accessibility (WCAG) — bestGradientTextColor, gradientContrastRatio (11-point sampling), gradientWcagLevel, createAccessibleGradient — auto-adjust stops to meet AA / AAA
  • CSS variable utilities — extractGradientVariables, resolveGradientVariables
  • Canvas & image export — gradientToCanvasGradient, gradientToImageData, gradientToDataURL; works with any CanvasRenderingContext2D or server-side canvas library
  • Vue 3 integration — VueGradientPlugin + 17 reactive use* hooks returning ComputedRef<string>; SSR-safe; own entry point (css-magic-gradient/vue), never loaded unless imported
  • React integration — same 17 hooks in css-magic-gradient/react; plain string via useMemo; no Vue dependency; SSR-safe
  • Full TypeScript — exported types for all options, return shapes, and discriminated unions
  • Single runtime dependency — color-value-tools for color math; Vue and React are optional peer deps, and neither is ever pulled in by the core entry point