VueCraft NPM

React ​

Import from css-magic-gradient/react. React is an optional peer dependency — the main bundle is unaffected. All hooks return a plain string memoized with useMemo, and are SSR-safe.

Example ​

tsx
import { useState } from 'react'
import {
  useLinearGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient/react'

export function GradientShowcase() {
  const [color, setColor] = useState('#3498db')

  const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
  const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
  const tint = useTintGradient(color, 7)
  const accessible = useAccessibleGradient(color, '#ffffff', { targetLevel: 'AA' })

  return (
    <div>
      <input type="color" value={color} onChange={(e) => setColor(e.target.value)} />
      <div style={{ background: linear, height: 80, borderRadius: 8 }} />
      <div style={{ background: tetradic, height: 80, borderRadius: 8 }} />
      <div style={{ background: tint, height: 80, borderRadius: 8 }} />
      <div style={{ background: accessible, height: 80, borderRadius: 8 }} />
    </div>
  )
}

Hooks ​

useLinearGradient(first, options?) ​

string — linear gradient from color or stops.

useMultiStepLinearGradient(color, steps?, options?) ​

string — multi-stop brightness gradient.

useMixedLinearGradient(colorA, colorB, steps?, options?) ​

string — HSL-interpolated two-color gradient.

useRadialGradient(color, options?) ​

string — radial gradient.

useConicGradient(color, options?) ​

string — conic gradient.

useRainbowConicGradient(options?) ​

string — full-spectrum rainbow conic.

useComplementaryGradient(color, options?) ​

string — complementary harmony gradient.

useTriadicGradient(color, options?) ​

string — triadic harmony gradient.

useAnalogousGradient(color, options?) ​

string — analogous harmony gradient.

useTetradicGradient(color, options?) ​

string — tetradic harmony gradient (linear/radial/conic).

useSplitComplementaryGradient(color, options?) ​

string — split-complementary harmony gradient.

useTintGradient(color, steps?, options?) ​

string — tint gradient (base → white).

useShadeGradient(color, steps?, options?) ​

string — shade gradient (base → black).

useToneGradient(color, steps?, options?) ​

string — tone gradient (base → gray).

useAccessibleGradient(color, textColor, options?) ​

string — auto-adjusted WCAG-compliant gradient.